jQuery点击自身以外地方关闭弹出层的简单实例
更新时间：2013年12月24日 09:29:03 作者：
本篇文章主要是对jQuery点击自身以外地方关闭弹出层的简单实例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
主要功能是点击显示,然后通过点击页面的任意位置都能关闭显示效果,主要是$(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样式自己修改！
相关文章
这篇文章主要介绍了jQuery 基础选择器与属性选择器，选择所有元素,此选择器使用要慎重，其速度是极其慢的，详细介绍内容需要的小伙伴可以参考一下下面文章内容2022-08-08
这篇文章主要介绍了jQuery查找节点并获取节点属性的方法,涉及jQuery简单获取节点及attr与text方法读取元素属性的相关技巧,需要的朋友可以参考下2016-09-09
这是一个基于jquey写的倒计时。当然代码有点小改动，只是改了一下展示效果。2014-05-05
这篇文章主要介绍了jQuery中inArray方法注意事项,结合实例形式分析了jQuery中inArray方法变量判断的相关注意事项,需要的朋友可以参考下2016-01-01
网友zoeDylan写的原创jquery插件，实现了图片轮播功能，jquery插件名称为zoeDylan.ImgChange，图片路径、跳转链接、提示标题都是有动态数组来配置，jquery插件可灵活配置6个参数， height高、width宽、mgs图片地址、links点击地址、tips图片说明、timers自动切换时间，2014-12-12
这篇文章主要介绍了jQuery通过写入cookie实现更换网页背景的方法,涉及jQuery结合cookie设置页面元素属性的相关操作技巧,需要的朋友可以参考下2016-04-04
我们经常遇到要操作DOM元素，例如<select>，在Asp.net中Dropdownlist原型就是select。2010-05-05
这篇文章主要介绍了基于jQuery插件jqzoom实现的图片放大镜效果,结合实例形式分析了jQuery插件jqzoom的使用方法与相关注意事项,需要的朋友可以参考下2017-01-01
今天共享一些令人振奋的UI教程，这些UI大部分是基于Jquery的插件，主要包括动态切换视图的相册、3D旋转分享按钮、Facebook admin Panel，下滑效果的导航Menu，滑翔购物车功能，漂亮的Form表单元素等等。2010-09-09
其实就是利用了jquery的ajax功能，获取远程的xml文件，读取指定内容的代码，对于学习jquery的朋友是个不错的参考。2009-12-12
最新评论