沃梦达 / 编程问答 / 前端问题 / 正文

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

沃梦达教程前端问题

2022-01-01

Closing Modal Popup by Clicking Away from It(通过单击远离它来关闭模式弹出窗口)

本文介绍了通过单击远离它来关闭模式弹出窗口的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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(); 
});


                        这篇关于通过单击远离它来关闭模式弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！