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中封装函数传递当前元素的方法示例
May 05 jQuery
jQuery实现可兼容IE6的遮罩功能详解
Sep 19 jQuery
jQuery实现的简单无刷新评论功能示例
Nov 08 jQuery
jQuery中将json数据显示到页面表格的方法
May 27 jQuery
jQuery 导航自动跟随滚动的实现代码
May 30 jQuery
jQuery实现的简单获取索引功能示例
Jun 04 jQuery
jQuery 实现批量提交表格多行数据的方法
Aug 09 jQuery
jQuery属性选择器用法实例分析
Jun 28 jQuery
使用jQuery实现掷骰子游戏
Oct 24 jQuery
jquery实现垂直手风琴导航栏
Feb 18 jQuery
jQuery实现简单评论功能
Aug 19 jQuery
jQuery实现tab栏切换效果
Dec 22 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
mac下安装nginx和php
2013/11/04 PHP
PHP独立Session数据库存储操作类分享
2014/06/11 PHP
PHP使用标准库spl实现的观察者模式示例
2018/08/04 PHP
Javascript查询DBpedia小应用实例学习
2013/03/07 Javascript
jQuery判断iframe中元素是否存在的方法
2013/05/11 Javascript
jQuery1.9.1针对checkbox的调整方法(prop)
2014/05/01 Javascript
利用原生JavaScript获取元素样式只是获取而已
2014/10/08 Javascript
原生javascript实现Tab选项卡切换功能
2015/01/12 Javascript
基于javascript实现根据身份证号码识别性别和年龄
2016/01/22 Javascript
JavaScript过滤字符串中的中文与空格方法汇总
2016/03/07 Javascript
AngularJS 面试题集锦
2016/09/06 Javascript
微信JS SDK接入的几点注意事项(必看篇)
2017/06/23 Javascript
MVVM框架下实现分页功能示例
2018/06/14 Javascript
layui文件上传控件带更改后数据传值的方法
2019/09/23 Javascript
node.js中 redis 的安装和基本操作示例
2020/02/10 Javascript
vue中提示$index is not defined错误的解决方式
2020/09/02 Javascript
python基础教程之popen函数操作其它程序的输入和输出示例
2014/02/10 Python
python实现监控linux性能及进程消耗性能的方法
2014/07/25 Python
Python探索之爬取电商售卖信息代码示例
2017/10/27 Python
Python设计模式之中介模式简单示例
2018/01/09 Python
pandas 数据实现行间计算的方法
2018/06/08 Python
Python语法分析之字符串格式化
2019/06/13 Python
python 使用matplotlib 实现从文件中读取x,y坐标的可视化方法
2019/07/04 Python
linux环境下Django的安装配置详解
2019/07/22 Python
python使用Matplotlib改变坐标轴的默认位置
2019/10/18 Python
Python TestSuite生成测试报告过程解析
2020/07/23 Python
一款纯css3实现的tab选项卡的实列教程
2014/12/11 HTML / CSS
HTML5 虚拟键盘出现挡住输入框的解决办法
2017/02/14 HTML / CSS
英国图书音像网站:Hive.co.uk(图书、电子书、DVD、蓝光、音乐CD等)
2017/10/16 全球购物
大唐电信科技股份有限公司java工程师面试经历
2016/12/09 面试题
公司人力资源的自我评价
2014/01/02 职场文书
乡镇消防工作实施方案
2014/03/27 职场文书
董事长秘书工作职责
2014/06/10 职场文书
浅谈python数据类型及其操作
2021/05/25 Python
Apache Hudi集成Spark SQL操作hide表
2022/03/31 Servers
Vue OpenLayer 为地图绘制风场效果
2022/04/24 Vue.js