- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title>点击空白处关闭弹出层</title>
- <meta http-equiv="content-type" content="text/html;charset=gb2312">
- <style type="text/css">
- #box{width:300px;height:200px;border:1px solid #000;display:none;}
- .btn{color:red;}
- </style>
- <script src="/ajaxjs/jquery1.3.2.js" type="text/javascript"></script>
- <script type="text/javascript">
- $(function(){
- $(".btn").click(function(event){
- var e=window.event || event;
- if(e.stopPropagation){
- e.stopPropagation();
- }else{
- e.cancelBubble = true;
- }
- $("#box").show();
- });
- $("#box").click(function(event){
- var e=window.event || event;
- if(e.stopPropagation){
- e.stopPropagation();
- }else{
- e.cancelBubble = true;
- }
- });
- document.onclick = function(){
- $("#box").hide();
- };
- })
- </script>
- </head>
- <body>
- <div id="box"></div>
- <span class="btn">点击此处打开弹出层</span><br>点击空白处关闭弹出层
- </body>
- </html>
js点击空白关闭弹出层
最新推荐文章于 2023-08-04 10:56:12 发布