在一个页面上打开多个模式框 [英] Opening multiple modal boxes on one page

问题描述

我有一个页面，当点击页面上的相应链接时，需要打开不同的模式框.我的结构和 javascript 可以为一个窗口工作，但我不能让它为多个窗口工作.我在想我需要遍历每个模态框...但不能完全弄清楚语法.

I have a page that needs to have different modal boxes open when their corresponding link on the page is clicked. I've got the structure and javascript to work for ONE window, but I can't get it to work for more than one. I am thinking I need to loop through each modal box...but can't quite figure out the syntax.

这是针对客户的 WordPress 网站，我使用高级自定义字段来填充内容.该页面尚未发布，所以这里有一个显示我的代码的 codepen:http://codepen.io/FelixB/pen/EPvEVG

This is for a client's WordPress site, and I'm using Advanced Custom Fields to populate the content. The page isn't published yet, so here's a codepen that shows my code: http://codepen.io/FelixB/pen/EPvEVG

代码:

var modal = document.getElementsByClassName('modal-window');

var btn = document.getElementsByClassName("click-to-open");

var span = document.getElementsByClassName("close")[0];

for (var i = 0; i < btn.length; i++) {
  var thisBtn = btn[i]
  thisBtn.onclick = function() {
    alert("hello");

    //modal.style.display = "block";
  }
}

span.onclick = function() { 
  modal.style.display = "none";
}

window.onclick = function(event) {

}

推荐答案

您必须使模态框独一无二，以便以后能够选择它们.一种方法是通过 id.

You must make modals unique to be able to select them later. One way to do this is through id.

<div id="modal-window-one" class="modal-window modal"></div>
<div id="modal-window-two" class="modal-window modal"></div>

您需要定义哪个按钮应该打开哪个窗口.一种可能的解决方案是通过 data-attributes

You need to define which button which window should open. One possible solution for this is through data-attributes

<div class="click-to-open" data-modal="modal-window-one"> //will open modal one
<div class="click-to-open" data-modal="modal-window-two"> //will open modal two

然后 - 事件:

var btn = document.getElementsByClassName("click-to-open");

for (var i = 0; i < btn.length; i++) {
  var thisBtn = btn[i];
  thisBtn.addEventListener("click", function(){
    var modal = document.getElementById(this.dataset.modal);
    modal.style.display = "block";
}, false);

再次 - 这是一种可能的解决方案.

Again - this is one possible solution.

这篇关于在一个页面上打开多个模式框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！