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

chosencombn(1:50, 25, c(1, 1000000L, 1e14))
#       [,1] [,2] [,3]
#  [1,]    1    1    3
#  [2,]    2    2    4
#  [3,]    3    3    6
#  [4,]    4    4    7
#  [5,]    5    5    8
#  [6,]    6    6   11
#  [7,]    7    7   14
#  [8,]    8    8   15
#  [9,]    9    9   17
# [10,]   10   10   20
# [11,]   11   11   22
# [12,]   12   12   25
# [13,]   13   13   27
# [14,]   14   14   30
# [15,]   15   15   31
# [16,]   16   16   32
# [17,]   17   17   33
# [18,]   18   18   36
# [19,]   19   20   37
# [20,]   20   23   39
# [21,]   21   27   40
# [22,]   22   39   42
# [23,]   23   42   47
# [24,]   24   45   48
# [25,]   25   49   50

HTML：

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

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

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 selector here。

Full list of css selectors

您可以在同一页面上使用多个模态，只需确保每个模态都有自己唯一的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";
    }
});

点击框外

4 个答案: