jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】


Posted in jQuery onJuly 31, 2018

本文实例讲述了jQuery实现点击自身以外区域关闭弹出层功能。分享给大家供大家参考,具体如下:

原理参考前面一篇《JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能》,小编顺便对原文区域外点击bug进行了修改,具体代码如下:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3water.com jQuery点击关闭弹出层</title>
<style>
.area{width:100%;height:100%;position:fixed;z-index:1;}
.hide{display:none;}
.con{width:400px; height:200px; background-color: #F6F4F0;position:fixed;z-index:2;}
</style>
</head>
<body>
<div class="area hide"></div>
<div class="down">click</div>
<div class="con hide">show-area</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 $("div.down").click(function(e) {
  e.stopPropagation();
  $("div.con").removeClass("hide");
  $("div.area").removeClass("hide");
 });
 $(".area").click(function() {
  if (!$("div.con").hasClass("hide")) {
   $("div.con").addClass("hide");
   $("div.area").addClass("hide");
  }
 });
});
</script>
</body>
</html>

运行该代码后,点击页面上的click可弹出一个弹出层,再点击弹出层外的空白区域即可关闭弹出层。

使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试运行效果如下:

jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jquery中each循环的简单回滚操作
May 05 jQuery
jQuery.Ajax()的data参数类型详解
Jul 23 jQuery
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 jQuery
jquery中有哪些api jQuery主要API
Nov 20 jQuery
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 jQuery
layui中使用jquery控制radio选中事件的示例代码
Aug 15 jQuery
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 jQuery
JS实现点击生成UUID的方法完整实例【基于jQuery】
Jun 12 jQuery
jQuery pager.js 插件动态分页功能实例分析
Aug 02 jQuery
jQuery实现弹幕特效
Nov 29 jQuery
jQuery实现简易QQ聊天框
Feb 10 jQuery
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
May 29 jQuery
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 #jQuery
jQuery实现导航样式布局操作示例【可自定义样式布局】
Jul 24 #jQuery
jQuery实现菜单的显示和隐藏功能示例
Jul 24 #jQuery
jQuery实现的监听导航滚动置顶状态功能示例
Jul 23 #jQuery
jquery实现搜索框功能实例详解
Jul 23 #jQuery
jQuery实现的点击按钮改变样式功能示例
Jul 21 #jQuery
jQuery实现输入框的放大和缩小功能示例
Jul 21 #jQuery
You might like
深入eAccelerator与memcached的区别详解
2013/06/06 PHP
PHP实现模仿socket请求返回页面的方法
2014/11/04 PHP
PHP pthreads v3使用中的一些坑和注意点分析
2020/02/21 PHP
PHP实现基本留言板功能原理与步骤详解
2020/03/26 PHP
Avengerls vs Newbee BO3 第一场2.18
2021/03/10 DOTA
iframe 异步加载技术及性能分析
2011/07/19 Javascript
分享JavaScript获取网页关闭与取消关闭的事件
2013/12/13 Javascript
javascript运算符——位运算符全面介绍
2016/07/14 Javascript
js删除Array数组中指定元素的两种方法
2016/08/03 Javascript
js替换字符串中所有指定的字符(实现代码)
2016/08/17 Javascript
详解Angular中$cacheFactory缓存的使用
2016/08/19 Javascript
angularjs实现多张图片上传并预览功能
2017/02/24 Javascript
JS控件bootstrap datepicker使用方法详解
2017/03/25 Javascript
vue子父组件通信的实现代码
2017/07/09 Javascript
nodejs结合socket.io实现websocket通信功能的方法
2018/01/12 NodeJs
Vue2.0 http请求以及loading展示实例
2018/03/06 Javascript
Node错误处理笔记之挖坑系列教程
2018/06/05 Javascript
详解React中合并单元格的正确写法
2019/01/08 Javascript
详解Vue用cmd创建项目
2019/02/12 Javascript
jQuery实现的五星点评功能【案例】
2019/02/18 jQuery
LayUI数据接口返回实体封装的例子
2019/09/12 Javascript
解决vue的router组件component在import时不能使用变量问题
2020/07/26 Javascript
Python字符串的encode与decode研究心得乱码问题解决方法
2009/03/23 Python
pandas数据框,统计某列数据对应的个数方法
2018/04/11 Python
python 接收处理外带的参数方法
2018/12/03 Python
详解python路径拼接os.path.join()函数的用法
2019/10/09 Python
pytorch 图像中的数据预处理和批标准化实例
2020/01/15 Python
python实现提取COCO,VOC数据集中特定的类
2020/03/10 Python
商场消防演习方案
2014/02/12 职场文书
宣传活动总结范文
2014/07/01 职场文书
2014年药店店长工作总结
2014/11/17 职场文书
工作年限证明模板
2015/06/15 职场文书
公司岗位说明书
2015/10/08 职场文书
导游词之藏龙百瀑景区
2019/12/30 职场文书
还在手动盖楼抽奖?教你用Python实现自动评论盖楼抽奖(一)
2021/06/07 Python
python 离散点图画法的实现
2022/04/01 Python