javascript - 第二个模式阻止关闭按钮对所有模式起作用？

Question

我遇到了这个问题，我有两个模态，打算添加第三个模态，单击按钮时每个模态都会正确打开，但单击“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

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

谢谢

Answer 1

您的代码存在一些问题:

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

您可以尝试将此作为快速解决方案:

工作演示: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/