Javascript 在一页上打开多个模态框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34779157/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Opening multiple modal boxes on one page
提问by Felix B
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.
我有一个页面，当单击页面上的相应链接时，需要打开不同的模式框。我有结构和 javascript 可以用于一个窗口，但我不能让它为多个窗口工作。我想我需要遍历每个模态框......但不能完全弄清楚语法。
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
这是针对客户的 WordPress 网站，我使用高级自定义字段来填充内容。该页面尚未发布，因此这是一个显示我的代码的代码笔：http://codepen.io/FelixB/pen/EPvEVG
The code:
编码：
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) {
}
回答by pgk
You must make modals unique to be able to select them later. One way to do this is through id.
您必须使模态独一无二，以便以后能够选择它们。一种方法是通过id.
<div id="modal-window-one" class="modal-window modal"></div>
<div id="modal-window-two" class="modal-window modal"></div>
You need to define which button which window should open. One possible solution for this is through data-attributes
您需要定义哪个按钮应该打开哪个窗口。一种可能的解决方案是通过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
And then - event:
然后 - 事件：
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.
再次 - 这是一种可能的解决方案。
回答by Nitesh
below is an example to display multiple popup using bootstrap, also attached the jsfiddle which showcases an example. Set a class name to the modal dialog box.
下面是使用引导程序显示多个弹出窗口的示例，还附上了展示示例的 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">×</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>
Instantiate the modal dialog box.
实例化模态对话框。
$('.myModal').modal();
Below is an running jsfiddle https://jsfiddle.net/niteshp27/msdg98vn/
下面是一个正在运行的 jsfiddle https://jsfiddle.net/niteshp27/msdg98vn/
回答by Tahir77667
The class of all modals will remain same as class="modal"but when there are numerous modals you wish to display on the same screen use the "id"property since Bootstrap Modals are written in Javascript and JS is totally based on id
所有模态的类将保持不变，class="modal"但是当您希望在同一屏幕上显示大量模态时，请使用该"id"属性，因为 Bootstrap模态是用 Javascript 编写的，而 JS 完全基于 id
<div id="modal-one" class="modal fade"></div>
<div id="modal-two" class="modal fade"></div>
You need to define which button will target which modal by using the data-targetattribute of a < button > tag. In case you're using < a > tag to trigger a modal then use the hrefattribute. Example :
您需要使用data-target<button> 标签的属性来定义哪个按钮将针对哪个模式。如果您使用 < a > 标记触发模态，请使用该href属性。例子 ：
<button data-toggle="modal" data-target="#modal-one"> First Modal </button>
<button data-toggle="modal" data-target="#modal-two"> Second Modal </button>
OR if using < a > tag then;
或者，如果使用 < a > 标签，则；
<a data-toggle="modal" href="#modal-one"> First Modal </a>
<a data-toggle="modal" href="#modal-one"> First Modal </a>
For further information you can checkout the following page Bootstrap Modals.
有关更多信息，您可以查看以下页面Bootstrap Modals。
Note:As per Bootstrap's official Documentation Bootstrap only supports one modal window at a time. Nested modals aren't supported as they believe them to cause poor user experiences.
注意：根据 Bootstrap 的官方文档 Bootstrap 一次只支持一个模态窗口。不支持嵌套模式，因为他们认为它们会导致糟糕的用户体验。
