点击div之外的地方就隐藏该div

效果：点击弹窗外任意一点，取消显示弹窗；这也是一个常用的效果

源码demo：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>测试</title>

  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>

 <style type="text/css">
    
    #div1{
        width: 200px;
        height: 200px;
        border:1px solid black;
        border-radius: 5px;
        display: none;
    }
     

 </style>
</head>
<body>
    
    <button onclick="showdiv()">点击显示弹窗</button>
    <div id="div1">点击弹窗大小外任意一点隐藏弹窗</div>


<script type="text/javascript">

    function showdiv(){

        $("#div1").show();

        $(document).one("click",
                    function() { //对document绑定一个影藏Div方法
                        $("#div1").hide();
                        
                });

                 event.stopPropagation();//阻止事件向上冒泡
    }

    $("#div1").click(function(event) {

        event.stopPropagation(); //阻止事件向上冒泡
    });
        
</script>
</body>
</html>

来源：https://www.cnblogs.com/Binblink/p/7624778.html

标签

div隐藏

div

易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!