效果：点击弹窗外任意一点，取消显示弹窗；这也是一个常用的效果
源码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>
原文：http://www.cnblogs.com/Binblink/p/7624778.html