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 相关文章推荐
在页面上点击任一链接时触发一个事件的代码
Apr 07 Javascript
IE iframe的onload方法分析小结
Jan 07 Javascript
Jquery实现的角色左右选择特效
May 21 Javascript
Lab.js初次使用笔记
Feb 28 Javascript
PHPMyAdmin导入时提示文件大小超出PHP限制的解决方法
Mar 30 Javascript
jQuery实现图像旋转动画效果
May 29 Javascript
jQuery实现鼠标滑过图片移动特效
Dec 08 Javascript
jquery实现超简单的瀑布流布局【推荐】
Mar 08 Javascript
JavaScript使用readAsDataUrl方法预览图片
May 10 Javascript
微信小程序实现表单校验功能
Mar 30 Javascript
layui点击左侧导航栏,实现不刷新整个页面,只刷新局部的方法
Sep 25 Javascript
JavaScript this在函数中的指向及实例详解
Oct 14 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中几种常见安全设置详解
2010/04/06 PHP
ThinkPHP中实例Model方法的区别说明
2010/08/21 PHP
php HandlerSocket的使用
2011/05/02 PHP
php 模拟get_headers函数的代码示例
2013/04/27 PHP
PHP中上传多个文件的表单设计例子
2014/11/19 PHP
php实时倒计时功能实现方法详解
2017/02/27 PHP
PHP实现留言板功能的详细代码
2017/03/25 PHP
Laravel5.5 手动分页和自定义分页样式的简单实现
2019/10/15 PHP
Jquery多选下拉列表插件jquery multiselect功能介绍及使用
2013/05/24 Javascript
JavaScript中定义类的方式详解
2016/01/07 Javascript
jquery对象访问是什么及使用方法介绍
2016/05/03 Javascript
JavaScript:Array类型全面解析
2016/05/19 Javascript
javaScript事件学习小结(四)event的公共成员(属性和方法)
2016/06/09 Javascript
JavaScript获取当前url根目录(路径)
2016/06/17 Javascript
详解使用Visual Studio Code对Node.js进行断点调试
2017/09/14 Javascript
解决vue 路由变化页面数据不刷新的问题
2018/03/13 Javascript
JS实现前端页面的搜索功能
2018/06/12 Javascript
React 组件中的 bind(this)示例代码
2018/09/16 Javascript
使用jquery的cookie实现登录页记住用户名和密码的方法
2019/03/13 jQuery
详解VUE项目中安装和使用vant组件
2019/04/28 Javascript
vue本地打开build后生成的dist文件夹index.html问题
2019/09/04 Javascript
解决vue初始化项目时,一直卡在Project description上的问题
2019/10/31 Javascript
记一次用ts+vuecli4重构项目的实现
2020/05/21 Javascript
[35:34]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
使用Python的PIL模块来进行图片对比
2016/02/18 Python
在Django中URL正则表达式匹配的方法
2018/12/20 Python
详解python3 + Scrapy爬虫学习之创建项目
2019/04/12 Python
使用pip安装python库的多种方式
2019/07/31 Python
Python破解BiliBili滑块验证码的思路详解(完美避开人机识别)
2020/02/17 Python
Pandas把dataframe或series转换成list的方法
2020/06/14 Python
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
2012/12/13 HTML / CSS
使用html2canvas.js实现页面截图并显示或上传的示例代码
2018/12/18 HTML / CSS
巴西图书和电子产品购物网站:Saraiva
2017/06/07 全球购物
学习委员自我鉴定
2014/01/13 职场文书
大班上学期个人总结
2015/02/13 职场文书
教师工作能力自我评价
2015/03/04 职场文书