码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-10-04 00:17:03      阅读:178      评论:0      收藏:0      [点我收藏+]

标签:event   asc   set   测试   dem   ext   pre   http   javascrip   

效果:点击弹窗外任意一点,取消显示弹窗;这也是一个常用的效果

 

 

源码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>

 

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

标签:event   asc   set   测试   dem   ext   pre   http   javascrip   

原文地址:http://www.cnblogs.com/Binblink/p/7624778.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!