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背景跟随鼠标滑动导航，特别美观，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2015-11-11
这篇文章主要介绍了jquery制作居中遮罩层效果示例,需要的朋友可以参考下2014-02-02
这篇文章主要介绍了jQuery中delegate()方法用法,实例分析了delegate()方法的功能、定义及为匹配元素的子元素添加一个或多个事件,并规定当这些事件发生时运行函数的使用技巧,需要的朋友可以参考下2015-01-01
Ajax一个向后端发送请求的方式,下面这篇文章主要给大家介绍了关于jQuery发送Ajax请求的几种方法,文中通过实例代码介绍的非常详细,对大家学习或者使用jQuery具有一定的参考学习价值,需要的朋友可以参考下2023-06-06
你是不是经常作这种开发，前端用JS写逻辑，后端用aspx或者ashx作服务？你是不是经常在请求aspx的时候在查询字符串中拼接诸如a.aspx?method=getDepartmetn¶m1=1¶m2=2的字符串？2014-05-05
使用jquery实现IE下按backspace相当于返回操作
后退键在各浏览器下默认为点击了一下后退按钮，下面为大家介绍下如何实现实现IE下按backspace相当于返回操作,需要的朋友可以参考下2014-03-03
jQuery操作 input type=checkbox的实现代码
jQuery操作 input type=checkbox的实现代码，需要的朋友可以参考下，这边脚本之家推荐大家看我们以前发布的文章2012-06-06
工作快一年了,最近学习jquery，对jquery很感兴趣。第一次写博客，有不足之处还请各位拍砖。2011-04-04
这篇文章主要为大家详细介绍了jquery实现图片上传前本地预览功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-04-04
利用jquery和css打造个性化的单选框和复选框,喜欢的朋友可以参考下。2010-10-10
最新评论