點擊div之外的地方就隱藏該div
阿新 • • 發佈：2017-10-04
dem spa none pla head event eight clas 2.0
效果：點擊彈窗外任意一點，取消顯示彈窗；這也是一個常用的效果
源碼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