页面设置弹窗,点击其他区域,弹窗关闭

Posted fanmiaolan

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了页面设置弹窗,点击其他区域,弹窗关闭相关的知识,希望对你有一定的参考价值。

页面设置弹窗,点击其他区域,弹窗关闭(案列)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>test</title>
    <script src="plugins/jquery-2.0.0.min.js"></script>
    <script>
        $(function(){
            $(#btn).click(function(){
                $(#box).css(display,block);
            });

            $(document).on(mousedown,function(e){
                if(!$(e.target).is($(#btn)) && !$(e.target).is($(#box)) && $(e.target).parent(#box).length === 0){
                    $(#box).css(display,none);
                }
            });
        });
    </script>

</head>
<body>
<button id="btn">显示</button>
<div style="display:none; width:200px; height:200px; " id="box">
    <div>内层的文字</div>
</div>
</body>

</html>

 

以上是关于页面设置弹窗,点击其他区域,弹窗关闭的主要内容,如果未能解决你的问题,请参考以下文章

关于点击空白关闭弹窗的js写法推荐?

vue 点击 除某元素以外的区域关闭弹窗

vue 如何设置点击空白处的遮罩层关闭弹窗

在同一个aspx页面中同时使用jqgrid和jquery-ui,ui的dialog弹窗一闪就关闭,如何让弹窗留住?

弹窗怎么设置

QML Popup弹窗置于最顶层,实现点击位置该弹出窗口下方的任何其他层组件,Popup弹窗都不会关闭