Question

在上面的例子中，我使用一个按钮来关闭模态。但是，使用一点JavaScript，您还可以在单击模态框外部时关闭模式。

问题是，当我使用2个模态时，我可以关闭第一个模态，当我点击任何地方，第二个我不能!!

＆＃13;

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>


  <button onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Open Modal 1</button>
  
    <button onclick="document.getElementById('id02').style.display='block'" class="w3-button w3-black">Open Modal 2</button>

  <div id="id01" class="w3-modal">
    <div class="w3-modal-content w3-card-4">
      <div class="w3-container">
        <p>model 1</p>
      </div>
    </div>
  </div>
  
  
    <div id="id02" class="w3-modal">
    <div class="w3-modal-content w3-card-4">
      <div class="w3-container">
        <p>model 2</p>
      </div>
    </div>
  </div>


<script>
// Get the modal
var modal = document.getElementById('id01','id02');

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>



</body>
</html>

＆＃13;

Answer 1

函数document.getElementById，就像名称中的Element所示，只获取一个元素，因此第二个参数'id2'被忽略，而您最终只得到了第一个模态元素。 Read more in the document。

您可以使用document.getElementsByClassName来解决此问题：

＆＃13;

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>


  <button onclick="document.getElementById('id01').style.display='block'" class="w3-button w3-black">Open Modal 1</button>
  
    <button onclick="document.getElementById('id02').style.display='block'" class="w3-button w3-black">Open Modal 2</button>

  <div id="id01" class="w3-modal">
    <div class="w3-modal-content w3-card-4">
      <div class="w3-container">
        <p>model 1</p>
      </div>
    </div>
  </div>
  
  
    <div id="id02" class="w3-modal">
    <div class="w3-modal-content w3-card-4">
      <div class="w3-container">
        <p>model 2</p>
      </div>
    </div>
  </div>


<script>
// Get the modal
var modals = document.getElementsByClassName('w3-modal');

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
console.log(event.target, event.target == modals[0], event.target == modals[1]);
    if (event.target == modals[0] || event.target == modals[1]) {
        modals[0].style.display = "none";
        modals[1].style.display = "none";
    }
}
</script>



</body>
</html>

＆＃13;

或者，您可以使用相对较新的api document.querySelector来统一选择DOM元素的用法。它使用类似字符串的css选择器来选择元素。 但它有点新，所以您可能需要在使用之前检查浏览器兼容性。

同一页面中超过2个型号

1 个答案: