时间戳

首页 > 解决方案 > 为什么我在外面点击时我的 js modal 没有关闭？

javascript - 为什么我在外面点击时我的 js modal 没有关闭？

问题描述

我正在尝试创建一个照片库，可以在其中单击图片以显示描述图片的模式。关闭按钮有效，但是，我需要能够在背景上单击外部以关闭模式。我有以下代码：

function stylemodals() {
  var modalarray = document.body.getElementsByClassName("modal");
  for (var i = 0; i < modalarray.length; i++) {
    modalarray[i].setAttribute("style", "display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; color:black; overflow: auto; background-color: rgba(0, 0, 0, .4);");
  }
}
stylemodals();

function stylemodalcontent() {
  var modalcontentarray =
    document.body.getElementsByClassName("modal-content");

  for (var i = 0; i < modalcontentarray.length; i++) {
    modalcontentarray[i].setAttribute("style", "background-color: #FFFFFF; margin: 15 % auto; border: 1 px solid #888;width: 70%;");
  }
}
stylemodalcontent();
//set 1
var mdl1 = document.getElementById('mdl1');
var btn1 = document.getElementById("btn1");
var close1 = document.getElementById("close1");
btn1.onclick = function() {
  mdl1.style.display = "block";
};
close1.onclick = function() {
  mdl1.style.display = "none";
};
window.onclick = function(event) {
  if (event.target == mdl1) {
    mdl1.style.display = "none";
  }
};
<table>
    <tr>
        <td>

            <!-- Trigger/Open The Modal NEEDS AN IMAGE -->
            <input type="image" src="" alt="ib-image" id="btn1">

            <!-- The Modal -->
            <div id="mdl1" class="modal">
                <!-- Modal content NEEDS CONTENT-->
                <div class="modal-content">
                    <span id="close1" style="color: rgb(31, 31, 31); float: right; 
                font-size: 28px; font-weight: bold;">&times;</span>
                    <p>CONTENT</p>
                </div>
            </div>
        </td>
    </tr>
</table>

我一直在研究如何做到这一点，我从 w3schools 复制并粘贴了它，然后根据我的需要对其进行了修改，但我仍然无法在模式之外单击以关闭。我该怎么做呢？

- 编辑 -

这是新代码：

var modal = document.getElementById("modal");
modal.setAttribute("style", "display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; color: black; overflow: auto; background-color: rgba(0, 0, 0, .4); ");
	
document.getElementById("modal-content").setAttribute("style", "background-color: #FFFFFF; margin: 15% auto; border: 1px solid #888; width: 70%;");
	
var actualmodalcontent = document.getElementById("actual-modal-content");
function modal1 (){
	actualmodalcontent.innerHTML = "CONTENT1"
	modal.style.display = "block";
};
var close = document.getElementById("close");
window.onclick = function(event) {
   		if (event.target == modal) {
   		modal.style.display = "none";
   		}
    if (event.target == close) {
        modal.style.display = "none";
    }
};
<div id="modal">
	<div id="modal-content">
		<span id="close" onclick="close()" style="color: rgb(31, 31, 31); float: right; font-size: 28px; font-weight: bold;">&times;</span>

		<p id="actual-modal-content">
			CONTENT0
		</p>
	</div>
</div>

<input type="image" src="" alt="ib-image" id="btn1" onclick="modal1()">

标签： javascripthtmlmodal-dialog

解决方案

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

如果一个人完全点击模态框，而不是在它之外，那部分代码会将模态框显示设置为无。因此，您需要使用event.target !== mdl1 && !mdl1.contains( event.target )来检测页面上任何不是模态本身或其任何子元素的元素的点击。https://developer.mozilla.org/en-US/docs/Web/API/Node/contains

请记住，您可能只想在模态实际打开后将关闭处理程序添加到窗口，然后在模态关闭后将其删除。这样，您可以防止您的页面为甚至可能未呈现的模式触发多个 onclick 事件。

推荐阅读