jquery如何实现点击空白处隐藏元素


Posted in jQuery onDecember 05, 2017

我们在网站开发的时候经常会有点击空白处去隐藏已有的元素,DIV或者其他,本次教给大家如何用jquery实现这个特效的方法。

一款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实现的点击div区域外隐藏div区域的方法代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="js/jquery-1.4.4.min.js" ></script>
<title></title>
</head>
<style type="text/css">
body
{
background-color:#999999;
} 
#myDiv
{
background-color:#FFFFFF;
width:250px;
height:250px;
display:none;


}

</style>
<body>
<input id="btn" type="button" value="显示DIV" />
 
<div id="myDiv">
This is a div;
</div> 
</body> 
<script type="text/javascript">


var myDiv = $("#myDiv");
$(function ()
{
$("#btn").click(function (event) 
{
showDiv();//调用显示DIV方法
$(document).one("click", function () 
{//对document绑定一个影藏Div方法
$(myDiv).hide();
}); 
event.stopPropagation();//阻止事件向上冒泡
});
$(myDiv).click(function (event) 
{
event.stopPropagation();//阻止事件向上冒泡
});
});


function showDiv() 
{
$(myDiv).fadeIn();
}
</script>
jQuery 相关文章推荐
jQuery Validate 校验多个相同name的方法
May 18 jQuery
jquery与js实现全选功能的区别
Jun 11 jQuery
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 jQuery
jQuery中复合选择器简单用法示例
Mar 31 jQuery
jQuery中的for循环var与let的区别
Apr 21 jQuery
jQuery实现获取选中复选框的值实例详解
Jun 28 jQuery
jQuery实现图片简单轮播功能示例
Aug 13 jQuery
jQuery.validate.js表单验证插件的使用代码详解
Oct 22 jQuery
jQuery创建折叠式菜单
Jun 15 jQuery
jQuery实现弹出层效果
Dec 10 jQuery
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
Jan 29 jQuery
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
Dec 05 #jQuery
将jquery.qqFace.js表情转换成微信的字符码
Dec 01 #jQuery
利用jquery如何从json中读取数据追加到html中
Dec 01 #jQuery
JS和JQuery实现雪花飘落效果
Nov 30 #jQuery
jQuery zTree 异步加载添加子节点重复问题
Nov 29 #jQuery
jQuery图片加载失败替换默认图片方法汇总
Nov 29 #jQuery
jquery animate动画持续运动的实例
Nov 29 #jQuery
You might like
实用函数2
2007/11/08 PHP
PHP批量生成缩略图的代码
2008/07/19 PHP
php URL跳转代码 减少外链
2011/06/25 PHP
使用php显示搜索引擎来的关键词
2014/02/13 PHP
浅谈PHP eval()函数定义和用法
2016/06/21 PHP
php json中文编码为null的解决办法
2016/12/14 PHP
自写的利用PDO对mysql数据库增删改查操作类
2018/02/19 PHP
php+mysql实现的无限分类方法类定义与使用示例
2020/05/27 PHP
PHP7 list() 函数修改
2021/03/09 PHP
短信提示使用 特效
2007/01/19 Javascript
Jquery 学习笔记(一)
2009/10/13 Javascript
jquery插件如何使用 jQuery操作Cookie插件使用介绍
2012/12/15 Javascript
做好七件事帮你提升jQuery的性能
2014/02/06 Javascript
jQuery+ajax实现鼠标单击修改内容的思路
2014/06/29 Javascript
jquery实现点击页面计算点击次数
2015/01/23 Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
2015/09/27 Javascript
js实现table添加行tr、删除行tr、清空行tr的简单实例
2016/10/15 Javascript
如何判断出一个js对象是否一个dom对象
2016/11/24 Javascript
详解javascript replace高级用法
2019/02/17 Javascript
Python 网络编程起步(Socket发送消息)
2008/09/06 Python
编写Python脚本来获取Google搜索结果的示例
2015/05/04 Python
python开发之函数定义实例分析
2015/11/12 Python
python中实现k-means聚类算法详解
2017/11/11 Python
对PyTorch torch.stack的实例讲解
2018/07/30 Python
python 执行文件时额外参数获取的实例
2018/12/18 Python
Python(PyS60)实现简单语音整点报时
2019/11/18 Python
Django Form and ModelForm的区别与使用
2019/12/06 Python
python默认参数调用方法解析
2020/02/09 Python
在Python中使用K-Means聚类和PCA主成分分析进行图像压缩
2020/04/10 Python
专科文秘应届生求职信
2013/11/18 职场文书
刚毕业大学生自荐信范文
2014/02/20 职场文书
公司开业庆典策划方案
2014/06/04 职场文书
在校实习生求职信
2014/06/18 职场文书
学习雷锋精神倡议书
2015/04/27 职场文书
学校教师师德师风承诺书
2015/04/28 职场文书
学校教师培训工作总结
2015/10/14 职场文书