я пытался создать модальный, пожалуйста, проверьте мой код

#javascript #html #css #modal-dialog

#javascript #HTML #css #модальный диалог

Вопрос:

  1. Я пытался создать модальный при нажатии ABCD и отображать A, B, C, D, а при нажатии EFGH другой модальный для отображения E, F, G, H.
  2. Я боролся с ошибками в 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>  

Комментарии:

1. Он getElementById без «s» и getElementsByClassName вернет массив элементов.

Ответ №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>  

Ответ №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>