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实现文章图片弹出放大效果
Apr 06 jQuery
jQuery返回定位插件详解
May 15 jQuery
JQuery Ajax 异步操作之动态添加节点功能
May 24 jQuery
jQuery、layer实现弹出层的打开、关闭功能
Jun 28 jQuery
使用jQuery实现动态添加小广告
Jul 11 jQuery
[原创]jQuery实现合并/追加数组并去除重复项的方法
Apr 11 jQuery
通过jquery toggleClass()属性制作文章段落更改背景颜色
May 21 jQuery
jQuery实现常见的隐藏与展示列表效果示例
Jun 04 jQuery
jQuery实时统计输入框字数及限制
Jun 24 jQuery
jquery实现简单每周轮换的日历
Sep 10 jQuery
jQuery实现简单全选框
Sep 13 jQuery
jQuery实现推拉门效果
Oct 19 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
main.php
2006/12/09 PHP
php chr() ord()中文截取乱码问题解决方法
2008/09/08 PHP
php实现webservice实例
2014/11/06 PHP
thinkPHP中U方法加密传递参数功能示例
2018/05/29 PHP
PHP7移除的扩展和SAPI
2021/03/09 PHP
在JavaScript中实现命名空间
2006/11/23 Javascript
JQuery 学习笔记 选择器之六
2009/07/23 Javascript
Ajax 数据请求的简单分析
2011/04/05 Javascript
js querySelector和getElementById通过id获取元素的区别
2012/04/20 Javascript
防止文件缓存的js代码
2013/01/10 Javascript
JS实现图片横向滚动效果示例代码
2013/09/04 Javascript
JavaScript中的undefined学习总结
2013/11/30 Javascript
Js表格万条数据瞬间加载实现代码
2014/02/20 Javascript
基于JavaScript实现前端文件的断点续传
2016/10/17 Javascript
微信小程序 教程之小程序配置
2016/10/17 Javascript
jquery实现input框获取焦点的方法
2017/02/06 Javascript
JS中关于正则的巧妙操作
2017/08/31 Javascript
vue-cli中打包图片路径错误的解决方法
2017/10/26 Javascript
Bootstrap Table 搜索框和查询功能
2017/11/30 Javascript
Vue 中使用vue2-highcharts实现top功能的示例
2018/03/05 Javascript
详解关于微信setData回调函数中的坑
2019/02/18 Javascript
vue+eslint+vscode配置教程
2019/08/09 Javascript
详解Vue 项目中的几个实用组件(ts)
2019/10/29 Javascript
python数组复制拷贝的实现方法
2015/06/09 Python
使用C#配合ArcGIS Engine进行地理信息系统开发
2016/02/19 Python
Python基于递归算法实现的汉诺塔与Fibonacci数列示例
2018/04/18 Python
python操作excel的包(openpyxl、xlsxwriter)
2018/06/11 Python
Python批量生成特定尺寸图片及图画任意文字的实例
2019/01/30 Python
关于windows下Tensorflow和pytorch安装教程
2020/02/04 Python
520使用Python实现“我爱你”表白
2020/05/20 Python
巴西最大的在线约会网站:ParPerfeito
2018/07/11 全球购物
自动化专业个人求职信范文
2013/11/29 职场文书
2014年度党员自我评议
2014/09/13 职场文书
保险内勤岗位职责
2015/04/13 职场文书
2019新员工试用期转正申请书3篇
2019/08/13 职场文书
Mysql数据库值的添加、修改、删除及清空操作实例
2021/06/20 MySQL