在一个页面上打开多个模式框答案

【问题标题】：Opening multiple modal boxes on one page在一个页面上打开多个模式框
【发布时间】：2016-01-13 23:38:42
【问题描述】：

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

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

}

【问题讨论】：

标签： javascript wordpress modal-dialog modalpopups

【解决方案1】：

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

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

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

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

【讨论】：

成功！在我数小时摆弄各种可能性之后，这现在正在起作用。谢谢！！（我不能投票，显然 - 太新了。我会尽快给这个答案投票。）再次感谢！
我很高兴能提供帮助。不要担心upvote，只需将答案标记为已完成，因此其他用户不会处理它。 :)
pgk，我希望你能在这个项目上为我提供更多帮助。如何让模态在模态本身之外单击时关闭。单击关闭按钮即可关闭，但如果用户单击窗口中的任何位置，我希望它们关闭。你有什么建议吗？
肮脏的方法是将侦听器附加到您的body 并单击检查以查看事件目标是主体还是与模态不同。如果是这样，循环抛出所有模态并关闭它们。但也许更好的决定是将覆盖添加到您的模态 - 这是用户对模态的期望 - 并将相同的侦听器从关闭按钮附加到覆盖。

【解决方案2】：

下面是使用引导程序显示多个弹出窗口的示例，还附加了展示示例的 jsfiddle。为模态对话框设置一个类名。

<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/

【讨论】：

【解决方案3】：

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

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

您需要使用

<button data-toggle="modal" data-target="#modal-one"> First Modal </button>          
<button data-toggle="modal" data-target="#modal-two"> Second Modal </button>

或者如果使用标签则;

<a data-toggle="modal" href="#modal-one"> First Modal </a>
<a data-toggle="modal" href="#modal-one"> First Modal </a>

欲了解更多信息，您可以查看以下页面Bootstrap Modals.

注意： 根据 Bootstrap 的官方文档，Bootstrap 一次只支持一个模态窗口。不支持嵌套模式，因为他们认为它们会导致糟糕的用户体验。

【讨论】：