Question

我使用Keenan Payne描述的模态窗口，用HTML5＆amp; CSS3。当用户点击模态窗口外的黑暗背景时，我希望它关闭。有谁知道怎么做？

Keenan Payne的模态窗口： http://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/

Answer 1

您必须更改与#openModal不同的目标。您可以导入jQuery，将其放在<head>部分：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

并在</body>标记之前添加此代码：

<script type="text/javascript">
    $("#openModal").click( function() {
        if (!$("#openModal>div").is(":hover")) document.location.href='#';
    });
</script>

因此，当用户点击叠加层时，目标将在“＃”上更改，并且模式将会关闭。

HTML5 CSS3模式窗口，单击外部时关闭

1 个答案: