Javascript 通过在框外单击关闭模式

我可以使用简单的css通过点击框外来关闭模式吗？我已经看到了如何使用jQuery/JavaScript实现这一点的示例。我现在已经设置好了，这样当单击“x”时它就会关闭，并且没有使用JavaScript：

然后在我的css文件中：

.close {
 opacity: 10px;
 background-color: darkblue;
 color: #FFFFFF;
 line-height: 25px;
 position: absolute;
 right: -12px;
 text-align: center;
 top: -10px;
 width: 24px;
 text-decoration: none;
 font-weight: bold;
 -webkit-border-radius: 12px;
 -moz-border-radius: 12px;
 border-radius: 12px;
 -moz-box-shadow: 1px 1px 3px #000;
 -webkit-box-shadow: 1px 1px 3px #000;
  box-shadow: 1px 1px 3px #000;
}
.close:hover {
  background: #00d9ff;
}

---

这不能用简单的CSS来完成

---

Javascript可以使页面动态且反应迅速，因此您应该使用它来监听事件并操纵向用户显示的内容

您可以使用调用Javascript函数的按钮来打开模式，而不是使用CSS，如下所示：

jQuery：

<button id="modal-button" onclick="openModal();">Open Modal</button>

开放模式

HTML:

函数openModal（）
{
$（'myModal'）.modal（'show'）；
}

---

使用此方法，您将能够单击关闭模式以关闭它。

如果您可以更改

html

，并在模式前放置一个隐藏的

复选框和一个额外的覆盖，那么是的，我为您提供了一个解决方案

HTML

发件人：

注：z索引仅适用于定位元素（位置：绝对、位置：相对或位置：固定）

它是如何工作的？我们在输入之后有一个隐藏的覆盖和模式。当检查此输入时，将显示叠加和模式。
覆盖和关闭按钮是复选框的标签，因此单击它们将取消选中输入，从而隐藏模式。您需要在html中的某个地方使用另一个标签，它当然会显示模式

你可以读到这本书


您可以在同一页面上使用多个模态，只需确保每个模态都有自己唯一的
id
和
for
属性值。问题没有提到模态是否必须在显示/隐藏时设置动画，这也是可能的。
您可以通过单击外侧关闭div

将此代码添加到js文件或
标记中

用要关闭的DIV的ID替换DIV的ID

document.body.addEventListener("click", function() {
    var element = document.getElementById("ID_OF_DIV");
    if (element) {
        element.style.display = "none";
    }
});

我觉得这个回复作为一个评论比它自己的更有效answer@Nick这不是评论，而是对马哈茂德所问问题的回答？问：“我可以使用css来
<input type="checkbox" id="modal-toggle" class="modal-toggle" />
<label for="modal-toggle" class="modal-overlay"></label>
<div class="modal">
    <label for="modal-toggle" class="modal-close-button">X</label>
</div>

.modal-toggle,
.modal-overlay,
.modal {
    display: none;
}

.modal-toggle:checked + .modal-overlay,
.modal-toggle:checked + .modal-overlay + .modal {
    display: block;
}

.modal-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
}

.modal {
    position: absolute;
    /* I've used absolute here to note that the modal can't be static */
    /* add other properties to position this div */
    z-index: 2;
}

document.body.addEventListener("click", function() {
    var element = document.getElementById("ID_OF_DIV");
    if (element) {
        element.style.display = "none";
    }
});