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实现UTF8编码转换成gb2312编码
Dec 22 Javascript
javascript数组去掉重复
May 12 Javascript
JQuery为页面Dom元素绑定事件及解除绑定方法
Apr 23 Javascript
常用的jquery模板插件——jQuery Boilerplate介绍
Sep 23 Javascript
json实现前后台的相互传值详解
Jan 05 Javascript
JavaScript DOM基础
Apr 13 Javascript
JavaScript中常见的字符串操作函数及用法汇总
May 04 Javascript
jquery获取多个checkbox的值异步提交给php
Jul 07 Javascript
推荐10 个很棒的 jQuery 特效代码
Oct 04 Javascript
js表单中选择框值的获取及表单的序列化
Dec 17 Javascript
jQuery简单实现iframe的高度根据页面内容自适应的方法
Aug 01 Javascript
讲解vue-router之什么是编程式路由
May 28 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
PHP 日,周,月点击排行统计
2012/01/11 PHP
详解php实现页面静态化原理
2017/06/21 PHP
PHP编程实现阳历转换为阴历的方法实例
2017/08/08 PHP
PHP用函数嵌入网站访问量计数器
2017/10/27 PHP
简单谈谈javascript代码复用模式
2015/01/28 Javascript
jquery实现最简单的滑动菜单效果代码
2015/09/12 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
2016/11/07 Javascript
bootstrap弹出层的多种触发方式
2017/05/10 Javascript
Vue Transition实现类原生组件跳转过渡动画的示例
2017/08/19 Javascript
微信小程序使用audio组件播放音乐功能示例【附源码下载】
2017/12/08 Javascript
官方推荐react-navigation的具体使用详解
2018/05/08 Javascript
详解微信小程序input标签正则初体验
2018/08/18 Javascript
详解Vue.js在页面加载时执行某个方法
2018/11/20 Javascript
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
2019/08/16 Javascript
解决vue 表格table列求和的问题
2019/11/06 Javascript
vue简单封装axios插件和接口的统一管理操作示例
2020/02/02 Javascript
基于elementUI竖向表格、和并列的案例
2020/10/26 Javascript
Vant Weapp组件踩坑:picker的初始赋值解决
2020/11/12 Javascript
python正则匹配抓取豆瓣电影链接和评论代码分享
2013/12/27 Python
Python打印scrapy蜘蛛抓取树结构的方法
2015/04/08 Python
Python简单读写Xls格式文档的方法示例
2018/08/17 Python
python3实现单目标粒子群算法
2019/11/14 Python
python异常处理之try finally不报错的原因
2020/05/18 Python
Keras-多输入多输出实例(多任务)
2020/06/22 Python
css3 pointer-events 介绍详解
2017/09/18 HTML / CSS
美国手机支架公司:PopSockets
2019/11/27 全球购物
TCP/IP中的TCP和IP分别承担什么责任
2012/04/21 面试题
外贸公司实习自我鉴定
2013/09/24 职场文书
消防安全管理制度
2014/02/01 职场文书
开展党的群众路线教育实践活动方案
2014/02/05 职场文书
表彰会主持词
2014/03/26 职场文书
推荐信格式范文
2014/05/09 职场文书
人事行政专员岗位职责
2014/07/23 职场文书
老兵退伍标语
2014/10/07 职场文书
2016年七夕情人节宣传语
2015/11/25 职场文书
Ajax异步刷新功能及简单案例
2021/11/20 Javascript