Question

Here is a jsfiddle of my complete code, where you can test the functionality of the two modals. Clicking outside the second modal closes it, while clicking outside the first modal does not close it.

我在HTML页面上有两个模态弹出窗口，打开它们后，可以通过使用以下代码单击模态外部来关闭它们：

// When user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

由于某种原因，此代码仅适用于我的script.js文件中的第二个（最后一个）实例。你可以看到这个文件中只有两个代码块：第一个控制第一个模态，第二个控制第二个模态。上面代码的每个实例都在块的末尾。

// Get modalCompanies
var modalCompanies = document.getElementById('companiesModal');

// Get button that opens the modalCompanies
var btnCompanies = document.getElementById("companiesOpen");

// Get <spanCompanies> element that closes the modalCompanies
var spanCompanies = document.getElementsByClassName("close")[0];

// When user clicks on the button, open the modalCompanies 
btnCompanies.onclick = function() {
    modalCompanies.style.display = "block";
}

// When user clicks on <spanCompanies> (x), close modalCompanies
spanCompanies.onclick = function() {
    modalCompanies.style.display = "none";
}

// When user clicks anywhere outside of the modalCompanies, close it
window.onclick = function(event) {
    if (event.target == modalCompanies) {
        modalCompanies.style.display = "none";
    }
}



// Get modalPrivacy
var modalPrivacy = document.getElementById('privacyModal');

// Get button that opens the modalPrivacy
var btnPrivacy = document.getElementById("privacyOpen");

// Get <spanPrivacy> element that closes the modalPrivacy
var spanPrivacy = document.getElementsByClassName("close")[1];

// When user clicks on the button, open the modalPrivacy 
btnPrivacy.onclick = function() {
    modalPrivacy.style.display = "block";
}

// When user clicks on <spanPrivacy> (x), close modalPrivacy
spanPrivacy.onclick = function() {
    modalPrivacy.style.display = "none";
}

// When user clicks anywhere outside of the modalPrivacy, close it
window.onclick = function(event) {
    if (event.target == modalPrivacy) {
        modalPrivacy.style.display = "none";
    }
}

什么阻止每个块末尾的window.onclick = function(event) { }函数在两个块中都起作用？

Answer 1

第二个'onclick'事件重写第一个。使用element.addEventListener（）

Answer 2

使用

window.addEventListener("click", function(event) {
});

而不是

window.onclick = function() {
}

https://jsfiddle.net/qsL76mx6/

Answer 3

你的第二个window.onclik覆盖了第一个，你可以将它们结合起来并使用逻辑来隐藏不同的模态。

// Get modalCompanies
var modalCompanies = document.getElementById('companiesModal');

// Get button that opens the modalCompanies
var btnCompanies = document.getElementById("companiesOpen");

// Get <spanCompanies> element that closes the modalCompanies
var spanCompanies = document.getElementsByClassName("close")[0];

// When user clicks on the button, open the modalCompanies 
btnCompanies.onclick = function() {
    modalCompanies.style.display = "block";
}

// When user clicks on <spanCompanies> (x), close modalCompanies
spanCompanies.onclick = function() {
    modalCompanies.style.display = "none";
}



 // Get modalPrivacy
var modalPrivacy = document.getElementById('privacyModal');

// Get button that opens the modalPrivacy
var btnPrivacy = document.getElementById("privacyOpen");

// Get <spanPrivacy> element that closes the modalPrivacy
var spanPrivacy = document.getElementsByClassName("close")[1];

// When user clicks on the button, open the modalPrivacy 
btnPrivacy.onclick = function() {
    modalPrivacy.style.display = "block";
}

// When user clicks on <spanPrivacy> (x), close modalPrivacy
spanPrivacy.onclick = function() {
    modalPrivacy.style.display = "none";
}

// When user clicks anywhere outside of the modalPrivacy, close it
window.onclick = function(event) {
    if (event.target == modalPrivacy) {
        modalPrivacy.style.display = "none";
    }
    if (event.target == modalCompanies) {
        modalCompanies.style.display = "none";
    }
}

/*modal background*/
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/*modal box*/
.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 5px solid #f9cdcd;
    width: 80%; /* Could be more or less, depending on screen size */
}

.modal-content p{
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
}

/*close button*/
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

         <span id="companiesOpen">click companies</span>
         
         <!--companies modal-->
            <div id="companiesModal" class="modal">

              <!--modal-->
              <div class="modal-content">
                <span class="close">&times;</span>
                <p>test 1</p>
              </div>

            </div>
            
            <span id="privacyOpen">click privacy</span>
            
            <!--privacy modal-->
            <div id="privacyModal" class="modal">

              <!--modal-->
              <div class="modal-content">
                <span class="close">&times;</span>
                <p>test</p>
              </div>

            </div>

Answer 4

您在脚本中定义了window.onclick两次，因此第一个被后者覆盖。尝试将这两个操作移动到一个window.onclick，如下所示：

window.onclick = function(event) {
  if (event.target == modalCompanies) {
      modalCompanies.style.display = "none";
  }

    if (event.target == modalPrivacy) {
        modalPrivacy.style.display = "none";
    }
}

window.onclick = function（event）仅适用于第一项

4 个答案: