[英]Multiple modals with same script
我有以下代码来处理页面上的模式打开和关闭。 我希望能够在同一页面上加载第二个模式。 它将具有相同的类“ .custom-modal”,但具有不同的ID。
在我当前的代码中,两个模态都打开,但是只有第一个模态可以关闭。
var modal;
// Get the button that opens the modal
var btns = document.querySelectorAll(".customModalTrigger");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("custom-close")[0];
var body = document.body;
// When the user clicks the button, open the modal
[].forEach.call(btns, function(el) {
el.onclick = function() {
// Get the modal
modal = document.querySelector('#' + el.id + '.custom-modal');
modal.classList.add('-show');
body.classList.add('noscroll');
}
})
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.classList.remove('-show');
body.classList.remove('noscroll');
}
您的问题是这样的:
var span = document.getElementsByClassName("custom-close")[0];
具体来说, [0]
。 您仅将事件侦听器应用于第一个匹配元素,而没有其他任何元素。 相反,请尝试:
var span = document.getElementsByClassName("custom-close");
for (var i = 0; i < span.length; i++){
span[i].onclick = = function() {
modal.classList.remove('-show');
body.classList.remove('noscroll');
}
}
document.getElementsByClassName("custom-close")[0]
只是一个x按钮。 您应该向所有这些事件添加onclick事件处理程序
像这样:
var spans = document.getElementsByClassName("custom-close");
[].forEach.call(spans, function(el) {
el.onclick = function() {
modal.classList.remove('-show');
body.classList.remove('noscroll');
}
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.