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样式自己修改！

赞 (0)

相关推荐

  • js 点击页面其他地方关闭弹出层(示例代码)

    复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> <!-- *{font-size:12px;font-family:Verdana, Gen

  • JavaScript 点击页面上的按纽，弹出层，背景变灰

    点击页面上的按纽,弹出一个层,背景变灰 点击页面上的按纽,弹出一个层,背景变灰 function sAlert(str) { var msgw,msgh,bordercolor; msgw=400;//提示窗口的宽度 msgh=100;//提示窗口的高度 titleheight=25 //提示窗口标题高度 bordercolor= "#336699 ";//提示窗口的边框颜色 titlecolor= "#99CCFF ";//提示窗口的标题颜色 var sWidth

  • Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击

    实例如下所示: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击</title>    <script src="JS/jquery-1.9.1.js" type="text/javascript"></

  • js点击任意区域弹出层消失实现代码

    本文实例为大家分享了js点击任意区域弹出层消失的具体代码,供大家参考,具体内容如下 采用jquery element.parents();判断点击区域是否在弹出层上面或者在按钮上面,否则让弹出层消失. 完整代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head

  • jquery原创弹出层折叠效果点击折叠弹出一个层

    jquery原创弹出层折叠效果点击折叠弹出一个层

    弹出层效果很多网站上都用到,今天就整理最近项目里用到的一个小效果,点击折叠弹出一个层给用户填写信息.弹出层代码都是jq动态创建,每个人写法都不一样,需求也不一样,所有选择符合自已的即可. html: 复制代码 代码如下: <h1 class="bm"><a href="javascript:;">我要报名</a></h1> 复制代码 代码如下: *{ margin:0; padding:0;} body{ font:1

  • 点击弹出层外区域关闭弹出层jquery特效示例

    点击弹出层外区域关闭弹出层jquery特效,废话不说,上代码,简洁明了: 复制代码 代码如下: <html> <head> <style> .hide{display:none;} .con{width:500px;height:300px;background:#000;} </style> <title>点击弹出层 ,点击弹出层外区域关闭弹出层jquery特效</title> <script type="text/

  • 点击弹出层效果&弹出窗口后网页背景变暗效果的实现代码

    复制代码 代码如下: <html><head><title>网页特效-窗口特效-弹出窗口后网页背景变暗的效果</title><meta http-equiv="content-Type" content="text/html;charset=gb2312"><!--把下面代码加到<head>与</head>之间--><style type="text/cs

  • 基于jQuery实现点击弹出层实例代码

    jquery实现点击链接弹出层效果:本例实现的主要原理:jquery操作DOM元素.对层样式的设置.将display:设置为none;让层隐藏: 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.jb51.net" /> <tit

  • jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果

    jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果

    本文实例讲述了jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果.分享给大家供大家参考.具体如下: 这是一款jquery实现的弹出层,点击文字后从网页右上角飞入,也可以说是滑入,此类弹出框带有关闭按钮,可自定义标题栏和弹出框内容,风格自己可定义,代码简洁,基于jquery实现,学习参考价值大,也可拿出即用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-fade-in-title-info-stye-alert-code

  • jquery实现点击弹出层效果的简单实例

    jquery实现点击弹出层效果的简单实例

    弹出层在实际应用中我们经常会碰到大量的弹出层效果,下面我来做一个基于jquery的简单的弹出层效果实例,各位朋友有兴趣可参考. 效果代码如下: 在 弹出层 中下面是核心代码 复制代码 代码如下: <script type="text/javascript">// 渐变弹出层$(document).ready(function(){ var speed = 600;//动画速度 $("#race a").click(function(event){//绑定

随机推荐