在网站上测试多个模态。两种模态都可以打开。但是,第二个模态(contmodal)不会关闭。这似乎也造成了导致其他JS破裂的问题。
//* Get the Newsletter Modal
var newsmodal = document.getElementById('newsletter-modal');
var contmodal = document.getElementById('contact-modal');
// Get the button that opens the modal
var newsbtn = document.getElementsByClassName("signup-button")[0];
var editbtn = document.getElementsByClassName("contact-button")[0];
// Get the <span> element that closes the modal
var modalspan = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
newsbtn.onclick = function() {
newsmodal.style.display = "block";
}
editbtn.onclick = function() {
contmodal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
modalspan.onclick = function() {
newsmodal.style.display = "none";
contmodal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == newsmodal) {
newsmodal.style.display = "none";
}
if (event.target == contmodal) {
contmodal.style.display = "none";
}
}
答案 0 :(得分:0)
您的代码看起来很好。 在这个例子中你应该参考 - http://jsfiddle.net/3Vykc/
<a href="#openModal1">Box 1</a>
<div id="openModal1" class="modalDialog">
<div>
<a href="#close" title="Close" class="close">X</a>
<h2>Modal Box 1</h2>
<p>This is a sample modal box that can be created using the powers of CSS3. </p>
<p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
</div>
</div>
<a href="#openModal2">Box 2</a>
<div id="openModal2" class="modalDialog">
<div>
<a href="#close" title="Close" class="close">X</a>
<h2>Modal Box 2</h2>
<p><strong>Box 2</strong></p>
<p>yadda yadda</p>
</div>
更多参考资料:
Using multiple modal dialogs in one page
How can I close multiple bootstrap modals with the close button on the last popped modal
答案 1 :(得分:0)
我在Abhinav Ralhan的解决方案中添加了以下javascript:
//* Get the Newsletter Modal
var modal1 = document.getElementById('openModal1');
var modal2 = document.getElementById('openModal2');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal1 || event.target == modal2) {
window.location.href = "#"+close;
}
}