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

在您的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";
    }
}

Answer 2

您的代码存在一些问题：

你为两个模态使用相同的变量名称，这导致你的第一个模态变量（btn和modal）被第二个模态变量覆盖。所以你的第一个按钮打开了第二个模态
您使用第一个模态关闭按钮（document.getElementsByClassName（＆＃34; close＆＃34;）[0]）作为第二个范围关闭按钮的选择器，因此它会尝试关闭第一个模态而不是第二个
与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/

第二个模态是阻止关闭按钮工作所有模态？

2 个答案: