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插件HighCharts绘制2D饼图效果示例【附demo源码下载】
Mar 21 jQuery
jquery实现tab选项卡切换效果(悬停、下方横线动画位移)
May 05 jQuery
jQuery 表单序列化实例代码
Jun 11 jQuery
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 jQuery
利用jQuery异步上传文件的插件用法详解
Jul 19 jQuery
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
Aug 18 jQuery
jQuery实现的表格前端排序功能示例
Sep 18 jQuery
jQuery插件实现弹性运动完整示例
Jul 07 jQuery
jQuery轻量级表单模型验证插件
Oct 15 jQuery
jquery更改元素属性attr()方法操作示例
May 22 jQuery
jQuery中getJSON跨域原理的深入讲解
Sep 02 jQuery
jQuery冲突问题解决方法
Jan 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
php中根据变量的类型 选择echo或dump
2012/07/05 PHP
推荐几款用 Sublime Text 开发 Laravel 所用到的插件
2014/10/30 PHP
PHP的Yii框架入门使用教程
2016/02/15 PHP
PHP请求Socket接口测试实例
2016/08/12 PHP
js压缩利器
2007/02/20 Javascript
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)
2013/12/17 Javascript
在jquery中combobox多选的不兼容问题总结
2013/12/24 Javascript
jquery实现九宫格大转盘抽奖
2015/11/13 Javascript
jQuery Easyui学习之datagrid 动态添加、移除editor
2016/01/27 Javascript
javascript每日必学之基础入门
2016/02/16 Javascript
常用的JQuery函数及功能小结
2016/03/24 Javascript
jQuery替换节点用法示例(使用replaceWith方法)
2016/09/08 Javascript
聊聊JavaScript如何实现继承及特点
2017/04/07 Javascript
webpack开发跨域问题解决办法
2017/08/03 Javascript
JS实现获取word文档内容并输出显示到html页面示例
2018/06/23 Javascript
微信小程序—setTimeOut定时器的问题及解决
2019/07/26 Javascript
微信小程序添加插屏广告并设置显示频率(一天一次)
2019/12/06 Javascript
微信小程序淘宝首页双排图片布局排版代码(推荐)
2020/10/29 Javascript
Python标准库之sqlite3使用实例
2014/11/25 Python
python 函数内部修改外部变量的方法
2018/12/18 Python
在Pycharm中修改文件默认打开方式的方法
2019/01/17 Python
numpy数组之存取文件的实现示例
2019/05/24 Python
浅谈Python 递归算法指归
2019/08/22 Python
python命令 -u参数用法解析
2019/10/24 Python
python 多维高斯分布数据生成方式
2019/12/09 Python
解决python图像处理图像赋值后变为白色的问题
2020/06/04 Python
Python -m参数原理及使用方法解析
2020/08/21 Python
使用CSS3制作版头动画效果
2020/12/24 HTML / CSS
水芝澳美国官网:H2O Plus
2016/10/15 全球购物
Sperry澳大利亚官网:源自美国帆船鞋创始品牌
2019/07/29 全球购物
EJB3推出JPA的原因
2013/10/16 面试题
早读迟到检讨书
2014/01/24 职场文书
业务员辞职信范文
2015/03/02 职场文书
军训通讯稿范文
2015/07/18 职场文书
2015年主婚人婚礼致辞
2015/07/28 职场文书
工作计划范文之财务管理
2019/08/09 职场文书