jQuery点击自身以外地方关闭弹出层的简单实例


Posted in Javascript onDecember 24, 2013

主要功能是点击显示,然后通过点击页面的任意位置都能关闭显示效果,主要是$(document).click的作用

开发过程中经常有一些弹出层,弹出后要在点击页面其他地方时自动关闭,下面是实现代码:

HTML代码:

<div class="down">click</div>
<div class="con hide">show-area</div>

CSS代码:
.hide{display:none;}

JS代码

$(document).ready(function(){
$("div.down").click(function(e){
e.stopPropagation();
$("div.con").removeClass("hide");
});
$(document).click(function(){
if(!$("div.con").hasClass("hide")){
$("div.con").addClass("hide");
}
});
});

OK,自己本地测试下吧,css样式自己修改!
Javascript 相关文章推荐
什么是JavaScript
Aug 13 Javascript
JavaScript 监听textarea中按键事件
Oct 08 Javascript
推荐40个非常优秀的jQuery插件和教程【系列三】
Nov 09 Javascript
jQuery实现图片与文字描述左右滑动自动切换的方法
Jul 27 Javascript
JavaScript节点及列表操作实例小结
Aug 05 Javascript
PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)
Aug 06 Javascript
JS模仿腾讯图片站的图片翻页按钮效果完整实例
Jun 21 Javascript
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
Dec 15 Javascript
js date 格式化
Feb 15 Javascript
node的process以及child_process模块学习笔记
Mar 06 Javascript
JS实现获取毫秒值及转换成年月日时分秒的方法
Aug 15 Javascript
三剑客:offset、client和scroll还傻傻分不清?
Dec 04 Javascript
JS刷新当前页面的几种方法总结
Dec 24 #Javascript
js中indexof的用法详细解析
Dec 24 #Javascript
js 点击页面其他地方关闭弹出层(示例代码)
Dec 24 #Javascript
JS Replace 全部替换字符的用法小结
Dec 24 #Javascript
JS获取url链接字符串 location.href
Dec 23 #Javascript
window.location.href中url中数据量太大时的解决方法
Dec 23 #Javascript
取消选中单选框radio的三种方式示例介绍
Dec 23 #Javascript
You might like
多重?l件?合查?(一)
2006/10/09 PHP
dedecms系统的广告设置代码 基础版本
2010/04/09 PHP
php 调试利器debug_print_backtrace()
2012/07/23 PHP
php设计模式之观察者模式的应用详解
2013/05/21 PHP
基于flush()不能按顺序输出时的解决办法
2013/06/29 PHP
浅析php适配器模式(Adapter)
2014/11/25 PHP
php魔术方法功能与用法实例分析
2016/10/19 PHP
Laravel学习教程之View模块详解
2017/09/18 PHP
Laravel框架生命周期与原理分析
2018/06/12 PHP
laravel在中间件内生成参数并且传递到控制器中的2种姿势
2019/10/15 PHP
JavaScript 无符号右移赋值操作
2009/04/17 Javascript
JS获取dom 对象 ajax操作 读写cookie函数
2009/11/18 Javascript
js选取多个或单个元素的实现代码(用class)
2012/08/22 Javascript
封装的jquery翻页滚动(示例代码)
2013/11/18 Javascript
Jquery原生态实现表格header头随滚动条滚动而滚动
2014/03/18 Javascript
基于javascript的JSON格式页面展示美化方法
2014/07/02 Javascript
BootStrap实现树形目录组件代码详解
2016/06/21 Javascript
js验证真实姓名与身份证号,手机号的简单实例
2016/07/18 Javascript
Node.js中防止错误导致的进程阻塞的方法
2016/08/11 Javascript
JS实现重新加载当前页面
2016/11/29 Javascript
vue 开发一个按钮组件的示例代码
2018/03/27 Javascript
200行HTML+JavaScript实现年会抽奖程序
2019/01/22 Javascript
深入理解Antd-Select组件的用法
2020/02/25 Javascript
使用requests库制作Python爬虫
2018/03/25 Python
使用python的pexpect模块,实现远程免密登录的示例
2019/02/14 Python
详解Python的循环结构知识点
2019/05/20 Python
浅谈python3中input输入的使用
2019/08/02 Python
使用python制作一个解压缩软件
2019/11/13 Python
Python任务调度利器之APScheduler详解
2020/04/02 Python
Python数据可视化实现多种图例代码详解
2020/07/14 Python
python 绘制国旗的示例
2020/09/27 Python
Django扫码抽奖平台的配置过程详解
2021/01/14 Python
优衣库英国官网:UNIQLO英国
2016/12/25 全球购物
皇家阿尔伯特英国官方商店:Royal Albert骨瓷
2019/03/25 全球购物
课程设计心得体会
2013/12/28 职场文书
2016年春节慰问信息大全
2015/11/30 职场文书