通过单击远离它来关闭模式弹出窗口

2022-01-17 00:00:00 modal-dialog jquery javascript html css

我正在使用本教程添加模态屏幕:

I am using this tutorial to add a modal screen:

http://raventools.com/blog/create-a-modal-dialog-using-css-and-javascript/

一切都很好，除了关闭它.我不想通过按钮关闭它，而是让用户选择通过单击模式外部来关闭它，即在它后面的页面其余部分的背景中.

Everything works great except closing it. Rather than closing it via a button, I want to give the user the option to close it by clicking outside of the modal, i.e. in the background of the rest of the page behind it.

一位用户告诉我像这样将 onclick='overlay()' 添加到覆盖 div <div id="overlay" onclick='overlay()'>

A user told me to add onclick='overlay()' to the overlay div like this <div id="overlay" onclick='overlay()'>

当我尝试通过在外部单击来关闭模式时，它可以工作，但如果您单击实际模式本身，它也会关闭，我不想要它，因为它是一个注册表单.那么有没有办法只通过在实际模态本身之外单击来关闭模态?

When I try to close the modal by clicking outside if it, it works, but it also closes if you click on the actual modal itself, which I don't want as it is a registration form. So is there any way to only close the modal by clicking outside of the actual modal itself?

推荐答案

试试这个:

$(document).ready(function(){
$('#overlay').bind('click', function(event){
    if (event.target == $('#overlay').get(0))
        overlay(); 
});

相关文章