jQuery点击空白处隐藏弹出层

转载 2016年11月23日 19:36:09

一款jQuery点击空白处隐藏弹出层网页特效,点击按钮弹出层、点击页面空白处弹出层消失JS代码。主要功能是点击按钮弹出层显示,然后通过点击页面任意位置都能关闭弹出层显示效果,主要是$(document).click的操作应用。演示 Demo,效果源码:

 

CSS代码:
* { 
    padding: 0; 
	margin: 0; 
}
#btnShow{ 
    margin: 100px auto 0; 
	width: 90px; 
	display: block; 
}
#divTop{ 
    border: 2px solid #666666; 
	position: absolute; display: none; 
	width: 400px; 
	height: 200px; 
	color: #333; 
	background: #efefef; 
	padding-top: 10px; 
	text-align: center; 
	font: 16px/30px "微软雅黑"; 
	margin-top: -105px; 
	margin-left: -200px; 
	left: 50%; 
	top: 50%;
 }

 

JS代码:
 $(function () {  
     $('#btnShow').click(function (event) {  
         //取消事件冒泡  
         event.stopPropagation();  
         //按钮的toggle,如果div是可见的,点击按钮切换为隐藏的;如果是隐藏的,切换为可见的。  
         $('#divTop').toggle('slow');  
		 return false;
     });  
     //点击空白处隐藏弹出层,下面为滑动消失效果和淡出消失效果。
	 $(document).click(function(event){
		  var _con = $('#divTop');   // 设置目标区域
		  if(!_con.is(event.target) && _con.has(event.target).length === 0){ // Mark 1
			//$('#divTop').slideUp('slow');   //滑动消失
			$('#divTop').hide(1000);          //淡出消失
		  }
	});
 })

 

HTML代码:
<body>
<input type="button" id="btnShow" value="弹出框按钮" />
<div id="divTop">
 点击空白区域弹出层关闭!
</div>
</body>

 

经过测试,在移动端Iphone手机上点击页面空白处弹出层关闭失效,不支持document写法,解决方案:可以添加一个背景层作为页面空白对象处理。

 

点击空白处隐藏弹出层案例二:
<!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=utf-8" />
<style type="text/css">
#box{width:300px;height:200px;border:1px solid #000;display:none;}
.btn{color:red;}
</style>
<script type="text/javascript" src="http://www.internetke.com/public/js/jquery.js"></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教程请关注:科e互联 > 建站教程 > JavaScript教程

点击页面空白处时隐藏弹出的div层

由于工作需要,最近玩了下js,需求是做一个弹出层(需求上只有个原型图,什么说明都没有我也是醉了),然后就开始想需要实现的效果,那么点击空白处需要隐藏肯定是不可少的。下边是这个div弹出层: ...
  • liquantong
  • liquantong
  • 2015年11月27日 10:04
  • 2854

jquery点击空白处隐藏弹出层的写法

jquery点击空白处隐藏弹出层的写法 点击按钮展开弹出层以及点击关闭按钮关闭弹出层的效果,都很简单,但是展开弹出层后点击空白处也能关闭弹出层的效果,一开始对我来说却是有点难度的,研究了一下...
  • xj_li
  • xj_li
  • 2016年05月25日 11:09
  • 1529

jquery实现点击页面空白处,弹框消失

如何实现点击页面空白处使弹框消失?最近做项目,需要实现一个效果,就是“下拉框”或者弹框展开/显示之后,并不选择其中一个下拉选项,点击页面空白处,就使下拉框或者弹框收起/隐藏。 如果是select标签...
  • JaneLittle
  • JaneLittle
  • 2017年04月25日 11:12
  • 4389

js点击任意区域弹出层消失

采用jquery element.parents();判断点击区域是否在弹出层上面或者在,按钮上面,否则让弹出层消失 完整代码 Title parent > chil...
  • jayhkw
  • jayhkw
  • 2016年12月27日 13:57
  • 5125

js 鼠标点击一个按钮显示div的浮动框,点击页面其他任何地方后,隐藏浮动框

在本文为大家介绍两种思路实现点击页面其它地方隐藏该div,第一种是对document的click事件绑定事件处理程序..详情请参考本文 思路一 第一种思路分两步 第一步:对document的c...
  • mingliangniwo
  • mingliangniwo
  • 2015年01月14日 14:48
  • 10769

使用jquery实现点击按钮弹出层和点击空白处隐藏层

使用jquery弹出层和点击空白处隐藏层 $(function () { $('#btnShow').click(f...
  • bianjing40
  • bianjing40
  • 2015年10月25日 01:15
  • 2807

使用jquery实现点击按钮弹出层和点击空白处隐藏层

. . . . . 使用jquery弹出层和点击空白处隐藏层 . . . $(function () { . ...
  • macwhirr123
  • macwhirr123
  • 2012年05月25日 13:59
  • 11837

点击按钮div层弹出,点击空白处div隐藏

实现效果:点击按钮div层弹出,点击空白处div隐藏。 以下是代码: //样式很丑自己重新定义 #di...
  • halze_eyes
  • halze_eyes
  • 2016年09月05日 15:28
  • 3686

在空白处点击,实现隐藏div(下拉菜单或其它弹框)的方法

一个小需求的实现,有时候我们点击网站页面的一个下拉菜单按钮,可能要再次点击那个按钮才能使下拉菜单消失,这里要实现的需求是在其他地方(除下拉菜单和按钮以外的地方)点击也要使下拉菜单消失,这样做可以提高用...
  • s915097991
  • s915097991
  • 2016年04月16日 21:37
  • 6638

点击空白处隐藏div方法

一般写法:html点我显示div 我是点击btn后显示的divjQuery// 取消冒泡方法(兼容写法) function cancel_Bubble() { //如果事件对象存在 ...
  • anLazyAnt
  • anLazyAnt
  • 2016年05月16日 00:50
  • 656
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery点击空白处隐藏弹出层
举报原因:
原因补充:

(最多只允许输入30个字)