Question

在外部单击时，我的模态没有关闭。我的javascript很好，所以我认为我的问题出在html上，所以如果有人可以帮助找到我搞砸的地方，我将非常感激。

我试图改变两者以查看是否有效果，但是我并不幸运。

// 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 on 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";
  }
}

<header>
  <div class="container1">
    <div id="branding">
      <img src="image/logo.png">
    </div>
    <nav>
      <ul>
        <li><a href="index.html">HOME</a>
        </li>
        <button id="myBtn" class="button">ABOUT US</button>
        <div id="myModal" class="modal">
          <div class="modal-content">
            <div class="modal-header">
              <h2>Welcome</h2>
              s
            </div>
            <div class="modal-body">
              <p>We are a New York based salon and spa, stablished in 1991. We have the best professionals to meet your needs.</p>
            </div>
            <div class="modal-footer">
              <img id="img" src="image/logo3.png">
            </div>
          </div>
        </div>
      </ul>
    </nav>
  </div>
</header>

Answer 1

好吧，我已经解决了，只是我的第一个按钮（关于我们）正在工作，我对脚本进行了复制，并添加了一个类似的数字。

// 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 on 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 modal
var modal2 = document.getElementById('myModal2');

// Get the button that opens the modal
var btn = document.getElementById("myBtn2");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close2")[0];

// When the user clicks on the button, open the modal 
btn.onclick = function() {
   modal2.style.display = "block";

}

// When the user clicks on <span> (x), close the modal
span.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";
   }
}

Answer 2

您需要应用“关闭”背景，它将仅显示（隐藏和显示）带有模式事件。

检查以下代码：

// Get the modal
var modal = document.getElementById('myModal');
var modalBG = document.getElementById('myModalClose');

// 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 on the button, open the modal 
btn.onclick = function() {
  modal.style.display = "block";
  modalBG.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
	modalBG.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";
	   modalBG.style.display = "none";
   }
}

.close{
	display:none;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1040;
	background-color: #000;
	filter: alpha(opacity=50);
	opacity: .5;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<nav>
  <ul>
	<li><a href="index.html">HOME</a></li>
	<li><button id="myBtn" class="button">ABOUT US</button></div>
  </ul>
</nav>

<div id="myModalClose" class="close">sa</div>
<div id="myModal" class="modal" style="width:300px">
  <div class="modal-content">
	<div class="modal-header">
	  <h2>Welcome</h2>
	</div>
	<div class="modal-body">
	  <p>We are a New York based salon and spa, stablished in 1991. We have the best professionals to meet your needs.</p>
	</div>
	<div class="modal-footer">
	</div>
  </div>
</div>

现在用户单击浅黑色背景，模型和该背景将消失。

单击外部时我的模态没有关闭

2 个答案: