點擊div之外的地方就隱藏該div

本文轉載自查看原文 2017-10-03 23:05 3266 前端輪子

效果：點擊彈窗外任意一點，取消顯示彈窗；這也是一個常用的效果

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

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Jquery點擊div之外的地方隱藏當前div 點擊div和某些控件之外的地方隱藏div，點擊div不隱藏。對象 click和document click沖突有關問題 vue實現點擊其他地方隱藏div 點擊頁面其它地方將某個顯示的DIV隱藏 jquery點擊區域顯示或隱藏DIV,點擊非該DIV的地方隱藏該DIV 實現點擊頁面其他地方，隱藏div（vue） js點擊頁面其他地方如何隱藏div元素菜單實現點擊頁面其他地方，隱藏div（vue）點擊頁面其它地方隱藏div所想到的jQuery的delegate 實現點擊頁面其他地方，隱藏div（原生和VUE）