单击框外单击关闭模态

Question

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

<div><a href="#close" title="Close" class="close">X</a></div>然后在我的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;
}

Answer 1

仅使用纯CSS就无法实现这一点。

Javascript可以让您的页面变得动态和被动，因此您应该使用它来监听事件并操纵显示给用户的内容。

Answer 2

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

jQuery的：

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

HTML：

<script>

function openModal()
{
    $('#myModal').modal('show');
}

</script>

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

Answer 3

如果你可以改变html并在模态之前放置一个隐藏的checkbox和一个额外的叠加层，那么是的，我有一个解决方案。

HTML

<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>

CSS

.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;
}

来自w3schools.com ：

注意：z-index仅适用于定位元素（位置：绝对，位置：相对或位置：固定）。

它是如何工作的？ 输入后我们有一个隐藏的叠加和模态。 检查此输入后，将显示叠加和模态。 叠加层和关闭按钮是复选框的标签，因此单击这些将取消选中输入，从而隐藏模态。 你需要在你的HTML中的某个地方使用另一个标签，当然会提出模态。

你可以在这里阅读“+”css选择器 。

完整的CSS选择器列表

您可以在同一页面上使用多种模态，只要确保每一个模式都有其独特id ，并for属性值。 问题没有提到模式是否必须在show / hide上进行动画处理，这也是可能的。

Answer 4

你可以点击一边关闭div

将此代码添加到您的js文件或<script> </script>标记内

将ID_OF_DIV替换为要关闭的div的id

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