第二种模式阻止关闭按钮在所有模态上工作?

我遇到了这个问题，我有两个模态，打算添加第三个模态，单击按钮时每个模态都能正确打开，但在单击"X"时它们都没有关闭。如果我单击屏幕，它会自动关闭。无法弄清楚为什么要这样做，因为两者都有单独的 ID。如果我删除第二个模态JS代码，它可以正常工作，但是我无法打开第二个模态窗口。

这是 HTML：

<div id="generic_price_table">   
<div>
<div class="row-2 clearfix">
<div class="col-1-2">
<div class="generic_content clearfix">
<div class="generic_head_price clearfix">
<div class="generic_head_content clearfix">
<div class="head_bg"></div>
<div class="head">
<span></span>
</div>
</div>
<div class="generic_price_tag clearfix">    
</div>
</div>                            
<div class="generic_feature_list">
<ul>
</ul>
</div>
<div class="generic_price_btn clearfix">
<a id="myBtn" class="" href="javascript:void(0)">Register</a>
</div>
</div>   
</div>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">&times;</span>
<h1>Register</h1>
<p><strong>Select one of the below options to Start a Team, Join a Team, or Register as an Individual. </strong></p>
<p>
<a class="modalReg" id="StartTeamBTN" href="">Start a Team</a> <br />
<a class="modalReg" id="JoinTeamBTN" href="">Join a Team</a> <br />
<a class="modalRegRight" id="RegisterIndividualBTN" href="">Register as an Individual</a> <br />
</p>
</div>
</div>
<div class="col-1-2">
<div class="generic_content clearfix">
<div class="generic_head_price clearfix">
<div class="generic_head_content clearfix">
<div class="head_bg"></div>
<div class="head">
<span></span>
</div>
</div>
<div class="generic_price_tag clearfix">    
</div>
</div>                            
<div class="generic_feature_list">
<ul>
</ul>
</div>
<div class="generic_price_btn clearfix">
<a id="myBtn_2" class="" href="javascript:void(0)">Register</a>
</div>
</div>                               
</div>
</div>                   
</div>
<div id="myModal_2" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">&times;</span>
<h1>Register</h1>
<p><strong>Select one of the below options to Start a Team, Join a Team, or Register as an Individual. </strong></p>
<p>
<a class="modalReg" id="StartTeamBTN" href="">Start a Team</a> <br />
<a class="modalReg" id="">Join a Team</a> <br />
<a class="modalRegRight" id="">Register as an Individual</a> <br />
</p>
</div>
</div>             
</div>

这是我从 W3S 使用的 js：

<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal 
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}

// Get the second modal
var modal = document.getElementById('myModal_2');
// Get the button that opens the modal
var btn = document.getElementById("myBtn_2");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal 
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>

这是在JSBIN中：JSBIN LINK

非常感谢任何建议/帮助！

谢谢

您的代码存在一些问题：

您对两个模态使用相同的变量名称，这会导致您的第一个模态变量(BTN 和模态(被第二个模态变量覆盖。所以你的第一个按钮打开第二个模态
您使用第一个模态关闭按钮 (document.getElementsByClassName("close"([0]( 作为第二个跨度关闭按钮的选择器，因此它尝试关闭第一个模态而不是第二个模态
与在 window.onclick 上关闭模态相同。它关闭第二个模态(见上面的#1(而不是第一个模态。您的点击功能之间存在冲突

您可以尝试将其作为快速修复：

工作演示：https://jsfiddle.net/9nv3vqdd/1/

// Get the modal
var modal1 = document.getElementById('myModal');
// Get the button that opens the modal
var btn1 = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span1 = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal 
btn1.onclick = function() {
modal1.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span1.onclick = function() {
modal1.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal1) {
modal1.style.display = "none";
}
}

// Get the second modal
var modal2 = document.getElementById('myModal_2');
// Get the button that opens the modal
var btn2 = document.getElementById("myBtn_2");
// Get the <span> element that closes the modal
var span2 = document.getElementsByClassName("close")[1];
// When the user clicks the button, open the modal 
btn2.onclick = function() {
modal2.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span2.onclick = function() {
modal2.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal2) {
modal2.style.display = "none";
}
}
// Get the modal
var modal1 = document.getElementById('myModal');
// Get the button that opens the modal
var btn1 = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span1 = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal 
btn1.onclick = function() {
modal1.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span1.onclick = function() {
modal1.style.display = "none";
}

// Get the second modal
var modal2 = document.getElementById('myModal_2');
// Get the button that opens the modal
var btn2 = document.getElementById("myBtn_2");
// Get the <span> element that closes the modal
var span2 = document.getElementsByClassName("close")[1];
// When the user clicks the button, open the modal 
btn2.onclick = function() {
modal2.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span2.onclick = function() {
modal2.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if ((event.target == modal1) || (event.target == modal2)) {
event.target.style.display = "none";
}
}

工作演示：https://jsfiddle.net/9nv3vqdd/1/

在 js 文件中，更改辅助模态 ID 名称并使其唯一。

// Get the second modal
var modal2 = document.getElementById('myModal_2');
// Get the button that opens the modal
var btn2 = document.getElementById("myBtn_2");
// Get the <span> element that closes the modal
var span2 = document.getElementsByClassName("close")[1];
// When the user clicks the button, open the modal 
btn2.onclick = function() {
console.log('here');
modal2.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span2.onclick = function() {
modal2.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
if (event.target == modal2) {
modal2.style.display = "none";
}
}

相关内容

最新更新

热门标签：