#javascript #html #css #modal-dialog
#javascript #HTML #css #модальный диалог
Вопрос:
- Я пытался создать модальный при нажатии 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>
Комментарии:
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>