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简单绑定单个事件的方法示例
Jun 10 jQuery
jQuery 中msgTips 顶部弹窗效果实现代码
Aug 14 jQuery
jQuery选择器中的特殊符号处理方法
Sep 08 jQuery
jQuery读取本地的json文件(实例讲解)
Oct 31 jQuery
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
Nov 08 jQuery
通过jquery获取上传文件名称、类型和大小的实现代码
Apr 19 jQuery
使用jquery DataTable和ajax向页面显示数据列表的方法
Aug 09 jQuery
jQuery实现的简单拖拽功能示例【测试可用】
Aug 14 jQuery
jquery实现吸顶导航效果
Jan 08 jQuery
如何解决jQuery 和其他JS库的冲突
Jun 22 jQuery
jQuery实现动态向上滚动
Dec 21 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 静态变量的初始化
2009/11/15 PHP
PHP中用正则表达式清除字符串的空白
2011/01/17 PHP
php url路由入门实例
2014/04/23 PHP
php强制下载文件函数
2016/08/24 PHP
Laravel项目中timeAgo字段语言转换的改善方法示例
2019/09/16 PHP
tp5.1 实现setInc字段自动加1
2019/10/18 PHP
jQuery-Easyui 1.2 实现多层菜单效果的代码
2012/01/13 Javascript
javascript中Date对象的getDay方法使用指南
2014/12/22 Javascript
nodejs中实现阻塞实例
2015/03/24 NodeJs
EasyUI学习之Combobox级联下拉列表(2)
2016/12/29 Javascript
JS中使用正则表达式g模式和非g模式的区别
2017/04/01 Javascript
JavaScript实现随机数生成器(去重)
2017/10/13 Javascript
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
2017/11/02 Javascript
新手必须知的Node.js 4个JavaScript基本概念
2018/09/16 Javascript
jquery操作select常见方法大全【7种情况】
2019/05/28 jQuery
ES6扩展运算符和rest运算符用法实例分析
2020/05/23 Javascript
[26:24]完美副总裁、DOTA2负责人蔡玮专访:电竞如人生
2014/09/11 DOTA
Python-嵌套列表list的全面解析
2016/06/08 Python
浅谈Python 集合(set)类型的操作——并交差
2016/06/30 Python
Numpy中stack(),hstack(),vstack()函数用法介绍及实例
2018/01/09 Python
Python切片操作深入详解
2018/07/27 Python
在Python运行时动态查看进程内部信息的方法
2019/02/22 Python
如何通过Python实现标签云算法
2019/07/02 Python
python matplotlib 画dataframe的时间序列图实例
2019/11/20 Python
解决Python数据可视化中文部分显示方块问题
2020/05/16 Python
解析Python 偏函数用法全方位实现
2020/06/26 Python
CSS3实现文本垂直排列的方法
2018/07/10 HTML / CSS
武汉高蓝德国际.net机试
2016/06/24 面试题
入学生会自荐书范文
2014/02/05 职场文书
机修工工作职责
2014/02/21 职场文书
人事行政经理岗位职责
2014/06/18 职场文书
2014年电工工作总结
2014/11/20 职场文书
Mysql中where与on的区别及何时使用详析
2021/08/04 MySQL
java项目构建Gradle的使用教程
2022/03/24 Java/Android
关于对TypeScript泛型参数的默认值理解
2022/07/15 Javascript