一页打开多个模态框

Question

我有一个页面需要在点击页面上对应的 link 时打开不同的模式框。我的结构和 javascript 可以为一个 window 工作，但我无法让它为多个工作。我在想我需要遍历每个模式框...但不太明白语法。

这是针对客户的 WordPress 网站的，我正在使用高级自定义字段来填充内容。该页面尚未发布，所以这是一个显示我的代码的代码笔：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) {

}

Answer 1

您必须使模式唯一，以便以后 select 它们。一种方法是通过 id.

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

您需要定义 window 应打开哪个按钮。一种可能的解决方案是通过 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);

同样 - 这是一种可能的解决方案。

Answer 2

下面是一个使用 bootstrap 显示多个弹出窗口的示例，还附上了展示示例的 jsfiddle。为模态对话框设置一个 class 名称。

<div class="modal fade myModal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document">
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
  </div>
  <div class="modal-body">
    ...
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
  </div>
</div>  </div></div>

实例化模态对话框。

$('.myModal').modal();

下面是一个运行 jsfiddle https://jsfiddle.net/niteshp27/msdg98vn/

Answer 3

所有模态框的 class 将与 class="modal" 相同，但是当您希望在同一屏幕上显示多个模态框时，请使用 "id" 属性，因为Bootstrap Modals 是用 Javascript 编写的，JS 完全基于 id

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

您需要使用

一页打开多个模态框

Opening multiple modal boxes on one page

javascript

wordpress

modal-dialog

modalpopups