Question

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

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()">

Answer 1

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事件。

Answer 2

我检查了您的网站，您的整个问题是因为您有很多模型，并且要在window对象上注册10多个不同的click事件，唯一会实际注册的click事件是最后一个，其余的互相覆盖。

只要您这样做

window.onclick = function() {};
// Or
window['onclick'] = function() {};

您正在做的只是简单地分配给对象的属性，该对象就是窗口对象。

解决问题的最佳方法是制作一个模型，并根据用户单击的按钮修改其内容。

当我在外面单击时，为什么我的js模式没有关闭？

2 个答案: