HTML5 CSS3模式窗口，在外部单击时关闭 [英] HTML5 CSS3 modal window, close when click outside
问题描述
我使用基恩·佩恩(Keenan Payne)所述的模式窗口，该窗口由HTML5& CSS3. 我希望当用户单击模态窗口外部的深色背景时将其关闭.有人知道该怎么做吗?
I use the modal window as described by Keenan Payne, made with HTML5 & CSS3. I would like it to close when the user clicks on the darkened background, outside the modal window. Does anybody knows how to do this?
基南·佩恩(Keenan Payne)的模态窗口: http://www.webdesignerdepot. com/2012/10/creating-a-modal-window-with-html5-and-css3/
Modal window by Keenan Payne: http://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/
推荐答案
您必须在不同于#openModal的内容上更改目标.您可以导入jQuery，将其放在<head>部分:
You have to change the target on something different than #openModal. You can import jQuery, put this in <head> section:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
，并在</body>标记之前添加此代码:
and add this code right before </body> tag:
<script type="text/javascript">
$("#openModal").click( function() {
if (!$("#openModal>div").is(":hover")) document.location.href='#';
});
</script>
因此，当用户单击叠加层时，目标将更改为#"，并且模式将被关闭.
So when user clicks on the overlay the target will change on '#' and the modal will be closed.
这篇关于HTML5 CSS3模式窗口，在外部单击时关闭的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
