我正在尝试创建一个模式，请检查我的代码

Question

我试图在按下 ABCD 时创建模态并显示 A、B、C、D，而在按下 EFGH 时创建另一个模态以显示 E、F、G、H。
我一直在努力解决 getElementByID 和 getElementsByClass 中的错误

我确定我在 js 逻辑上做错了，请任何人指出。

var btn = document.getElementsByClassName('firstpage').addEventListener('click',function(){
  var modal = document.getElementsById("mode");
  modal.style.display = 'block';
} );

.modal1{
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
}

.modal2{
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
}

.key{
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #fefefe;
  padding : 20px;
  border: 1px solid #888;
  width: 80%;
}

<html>
  <div class='firstpage'>
    <div class='key'>ABCD</div>
    <div class='key'>DEFG</div>
  </div>
  
  <div id='mode' class='modal1'>
    <div class='key'>A</div>
    <div class='key'>B</div>
    <div class='key'>D</div>
    <div class='key'>E</div>
  </div>
  
  <div class='modal2'>
    <div class='key'>F</div>
    <div class='key'>G</div>
    <div class='key'>H</div>
    <div class='key'>I</div>
  </div>
</html>

Answer 1

您应该使用 document.querySelectorAll 并遍历所有元素以向它们添加事件侦听器。

document.querySelectorAll('.firstpage > .key').forEach((el,idx)=>el.addEventListener('click', function(e){
  document.querySelector(`.modal${idx + 1}`).classList.add('active');
}));

.modal1 {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
}

.modal2 {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
}

.key {
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #fefefe;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

.active {
  display: block;
}

<div class='firstpage'>
  <div class='key'>ABCD</div>
  <div class='key'>DEFG</div>
</div>

<div id='mode' class='modal1'>
  <div class='key'>A</div>
  <div class='key'>B</div>
  <div class='key'>D</div>
  <div class='key'>E</div>
</div>

<div class='modal2'>
  <div class='key'>F</div>
  <div class='key'>G</div>
  <div class='key'>H</div>
  <div class='key'>I</div>
</div>

Answer 2

var button_key_one = document.querySelector('#key_one');
var button_key_two = document.querySelector('#key_two');
var modal1_box = document.querySelector('.modal1');
var modal2_box = document.querySelector('.modal2');

button_key_one.onclick = function() {
  modal1_box.style.display = 'block';
}

button_key_two.onclick  = function() {
  modal2_box.style.display = 'block';
}

.modal1{
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
}

.modal2{
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
}

.key{
  display: grid;
  grid-template-columns: auto auto auto;
  background-color: #fefefe;
  padding : 20px;
  border: 1px solid #888;
  width: 80%;
}

<html>
  <div class='firstpage'>
    <div id="key_one" class='key'>ABCD</div>
    <div id="key_two" class='key'>DEFG</div>
  </div>
  
  <div id='mode' class='modal1'>
    <div class='key'>A</div>
    <div class='key'>B</div>
    <div class='key'>D</div>
    <div class='key'>E</div>
  </div>
  
  <div class='modal2'>
    <div class='key'>F</div>
    <div class='key'>G</div>
    <div class='key'>H</div>
    <div class='key'>I</div>
  </div>
</html>

我正在尝试创建一个模式，请检查我的代码

i was trying to create a modal, please check my code

html

javascript

css

modal-dialog