<html>
<style>
.hide{display:none;}
</style>
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(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");
}
});
});
</script>
<body>
<div class="down">click</div>
<div class="con hide">show-area</div>
</body>
</html>

  

jQuery弹出层_点击自身以外地方关闭弹出层的更多相关文章

  1. jQuery点击自身以外地方关闭弹出层

    转载自:http://blog.163.com/abkiss@126/blog/static/325941002012111754349590/ 主要功能是点击显示,然后通过点击页面的任意位置都能关闭 ...

  2. jq点击按钮打开和关闭弹出层,点击除了当前按钮以外的地方关闭弹出层

    1.html <a id="more" onclick="moreFun()">更多</a> <ul id="moreL ...

  3. fancybox 关闭弹出窗口 parent.$.fancybox.close(); 无反应 fancybox 关闭弹出窗口父页面自动刷新,弹出子窗口前后事件

    当我们在父页面使用 fancybox 弹出窗口后,如果想自己手动关闭,则可以 function Cancel() { parent.$.fancybox.close(); } 如果关闭没有反应,最好看 ...

  4. jquery 点击弹出层自身以外的任意位置,关闭弹出层

    <!--弹出层---> <div class="mask">    <div class="wrap"></div&g ...

  5. jquery Jbox 插件实现弹出窗口在修改的数据之后,关闭弹出窗口刷新父页面的问题

    http://blog.csdn.net/nsdnresponsibility/article/details/51282797 问题如题: 这里我们在父页面定义一个全局的变量来标识是否需要刷新父页面 ...

  6. jquery实现当前页面按钮点击全屏,点击退出全屏

    var fullscreen=function(){ elem=document.body; if(elem.webkitRequestFullScreen){ elem.webkitRequestF ...

  7. jquery层居中,点击小图查看大图,弹出层居中代码,顶部层固定不动,滚动条滚动情况

    jquery层居中,点击小图查看大图,弹出层居中代码 http://www.cnblogs.com/simpledev/p/3566280.html 见第一版,发现一个情况,如果页面内容多出一屏的情况 ...

  8. JQuery弹出层,点击按钮后弹出遮罩层,有关闭按钮

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  9. JQuery弹出层,点击按钮后弹出遮罩层,有关闭按钮【转】

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

随机推荐

  1. delphi 默认字体修改

    Windows Registry Editor Version 5.00   [HKEY_CURRENT_USER\Software\Borland\Delphi\7.0\FormDesign] &q ...

  2. HTML几类标签的应用总结

    打开DREAMWEAVER,新建HTML,如下图: body的属性: bgcolor 页面背景色 background  背景壁纸.图片 text  文字颜色 topmargin  上边距 leftm ...

  3. Unrecognized Windows Sockets error: 0: JVM_Bind 异常解决办法

    java.net.SocketException: Unrecognized Windows Sockets error: 0: JVM_Bind 此异常的原因是服务器端口被占用 所以解决办法是: 一 ...

  4. ros和Android(一)

    ros和Android :first-child { margin-top: 0; } blockquote > :last-child { margin-bottom: 0; } img { ...

  5. Nginx入门之两种handler函数的挂载方式

    请在文章页面明显位置给出原文连接,否则保留追究法律责任的权利. 接着上次的文章,今天研究<深入理解Nginx模块开发与架构解析>一书中给出的mytest的例子,发现和 /tengine.t ...

  6. 礼仪或许就是尊重的还有一个说法——leo鉴书61

    <Leo鉴书(第1辑)>已登陆百度阅读,今后还将不断更新,免费下载地址:http://t.cn/RvawZEx 礼仪从字面上就区分成"礼"和"仪"两 ...

  7. Java-WebSocket

    A barebones WebSocket client and server implementation written in 100% Java. http://java-websocket.o ...

  8. [Javascript] Create an Array concatAll method

    In addition to flat Arrays, programmers must often deal with nested Arrays. For example let's say we ...

  9. android95 缩放加载大图片

    MainActivity: package com.itheima.loadimage; import android.os.Bundle; import android.app.Activity; ...

  10. Hessian

    一.远程通讯协议的基本原理 网络通信需要做的就是将流从一台计算机传输到另外一台计算机,基于传输协议和网络 IO 来实现,其中传输协议比较出名的有 http . tcp . udp 等等, http . ...