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实现图片轮播器
May 23 jQuery
Angular2使用jQuery的方法教程
May 28 jQuery
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
Jun 12 jQuery
关于jQuery.ajax()的jsonp碰上post详解
Jul 02 jQuery
基于jquery实现多选下拉列表
Aug 02 jQuery
jQuery EasyUI 折叠面板accordion的使用实例(分享)
Dec 25 jQuery
jquery实现动态添加附件功能
Oct 23 jQuery
jquery层次选择器的介绍
Jan 18 jQuery
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
Mar 06 jQuery
JQuery获得内容和属性方法解析
May 30 jQuery
jQuery实现简单评论功能
Aug 19 jQuery
JQuery基于FormData异步提交数据文件
Sep 01 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
使用URL传输SESSION信息
2015/07/14 PHP
反射调用private方法实践(php、java)
2015/12/21 PHP
解决php扩展安装不生效问题
2019/10/25 PHP
Javascript 函数中的参数使用分析
2010/03/27 Javascript
一个基于jquery的图片切换效果
2010/07/06 Javascript
Uglifyjs(JS代码优化工具)入门 安装使用
2020/04/13 Javascript
浅析jQuery对select操作小结(遍历option,操作option)
2013/07/04 Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
2014/08/20 Javascript
JS烟花背景效果实现方法
2015/03/03 Javascript
jQuery网页版打砖块小游戏源码分享
2015/08/20 Javascript
JavaScript获取当前cpu使用率的方法
2015/12/15 Javascript
JavaScript修改作用域外变量的方法
2016/03/25 Javascript
js图片轮播手动切换特效
2017/01/12 Javascript
jQuery基本选择器和层次选择器学习使用
2017/02/27 Javascript
Vue实现双向数据绑定
2017/05/03 Javascript
vue 2.0路由之路由嵌套示例详解
2017/05/08 Javascript
Vue源码分析之Vue实例初始化详解
2019/08/25 Javascript
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
2019/11/12 Javascript
js实现随机抽奖
2020/03/19 Javascript
Vue组件通信$attrs、$listeners实现原理解析
2020/09/03 Javascript
跟老齐学Python之变量和参数
2014/10/10 Python
python微信公众号之关注公众号自动回复
2018/10/25 Python
python自动发送测试报告邮件功能的实现
2019/01/22 Python
Python selenium爬取微博数据代码实例
2020/05/22 Python
python实现简单的学生管理系统
2021/02/22 Python
台湾菁英交友:结识黄金单身的台湾人
2018/01/22 全球购物
免税水晶:Duty Free Crystal
2019/05/13 全球购物
法国最大的在线眼镜店:EasyLunettes
2019/08/26 全球购物
心理学专业毕业生推荐信范文
2013/11/21 职场文书
出纳工作检讨书
2014/10/18 职场文书
检讨书范文1000字
2015/01/28 职场文书
离婚起诉书范文2015
2015/05/19 职场文书
交通肇事罪辩护词
2015/05/21 职场文书
2016年“世界环境日”校园广播稿
2015/12/18 职场文书
青年干部培训班学习心得体会
2016/01/06 职场文书
大学生社会服务心得体会
2016/01/22 职场文书