提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

jquery三个关闭弹出层的小示例

jQuery 示例 关闭 三个 弹出
2023-06-13 09:15:11 时间

在开发应用中我们做了一个弹出层，有时我们会做一个关闭按钮，这样点击关闭就可以把弹出层关闭了，但是有时希望只要不点击弹出层内就自动关闭弹出层了，下面我总结了三个实例。
例1

复制代码代码如下:

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>点击空白处关闭弹出窗口</title>
<metahttp-equiv="content-type"content="text/html;charset=gb2312">
<styletype="text/css">
.pop{width:200px;height:130px;background:#080;}
</style>
<scripttype="text/javascript"src="/ajaxjs/jquery-1.6.2.min.js"></script>
<scripttype="text/javascript">
$(function(){
 $(document).bind("click",function(e){
 vartarget =$(e.target);
 if(target.closest(".pop").length==0){
  $(".pop").hide();
 }
 })
})
</script>
</head>
<body>
<divclass="pop"></div>
</body>
</html>

例2,点击自身以外地方关闭弹出层

复制代码代码如下:

<html>
<style>
.hide{display:none;}
</style>
<scripttype="text/javascript"src="jquery-1.6.1.min.js"></script>
<scripttype="text/javascript">
$(document).ready(function(){
   $("div.down").click(function(e){
       e.stopPropagation();
       $("div.con").removeClass("hide");
   });
   $(document).click(function(){
       if(!$("div.con").hasClass("hide")){
           $("div.con").addClass("hide");
       }
   });
});
</script>
<body>
   <divclass="down">click</div>
   <divclass="conhide">show-area</div>
</body>
</html>
 

例3

复制代码代码如下:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery点击空白处关闭弹出层</title>
<metahttp-equiv="content-type"content="text/html;charset=utf-8">
<styletype="text/css">
#box{width:300px;height:200px;border:1pxsolid#000;display:none;margin:0auto;}
.btn{color:red;}
</style>
<scriptsrc="http://www.honoer.com/Public/Js/jQuery/jquery-1.6.2.min.js"type="text/javascript"></script>
<scripttype="text/javascript">
$(function(){
 $(".btn").click(function(event){
 vare=window.event||event;
 if(e.stopPropagation){
  e.stopPropagation();
 }else{
  e.cancelBubble=true;
 } 
 $("#box").show();
 });
 $("#box").click(function(event){
 vare=window.event||event;
 if(e.stopPropagation){
  e.stopPropagation();
 }else{
  e.cancelBubble=true;
 }
 });
 document.onclick=function(){
 $("#box").hide();
 };
})
</script>
</head>
<body>
<divid="box">打开我了,点空白关闭啊,谢谢</div>
<spanclass="btn">打开弹出层</span>
</body>
</html>
 

相关文章