使用JS关闭多个模块

在站点上测试多个模块。两种模式都可以打开。但是，第二个模态（contmodal）不会关闭。这似乎也造成了导致其他JS破裂的问题。使用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"; 
    } 
}

来源

2017-05-06 J.S.T. Andrews

代码似乎没有问题。你有没有看到在控制台中是否有任何错误？ – Alex

看看这个https://github.com/EasonWang01/react-pure-css-modal 不需要使用js – seasonqwe

问题出在哪里当用户点击（x）时，关闭模式？或者当用户点击模式外的任何地方时，关闭它？ –

你的代码看起来不错。下面是这个例子中，你应该是指 - 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>

How can I close multiple bootstrap modals with the close button on the last popped modal

来源

2017-05-06 06:30:07

不会关闭“contact-modal”。这是一个很好的例子。如果用户在div外部单击，我可以添加JS来关闭模式。 '// *获取时事通讯模式 var modal1 = document.getElementById（'openModal1'）; var modal2 = document.getElementById（'openModal2'）; //当用户点击的模态的以外的任何地方，关闭它 window.onclick =函数（事件）{ 如果（event.target == modal1）{ modal1.style.display = “无”; } if（event.target == modal2）{ modal2.style.display =“none”; } }' 不幸的是，这不允许用户再次点击它来重新打开它。 –

添加以下JavaScript来阿比纳夫Ralhan的解决方案：

//* 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; 
    } 
}

来源

2017-05-11 22:46:58

使用JS关闭多个模块

回答

相关问题