核心思想：

监听body的click事件，事件触发的时候判断是否发生在弹出的div上，如果不在，关闭弹层

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#pop{border:#000; background-color:#CCC; position:absolute; left:50px; top:50px;width:200px;height:500px; display:none}
#btn{color:#f00}
</style>
<script type="text/javascript">
function $(id){return document.getElementById(id);}
window.onload = function(){
　　document.onclick = function(e){
　　　　$("pop").style.display = "none";
　　}
　　$("btn").onclick = function(e){
　　　　$("pop").style.display = "block";
　　　　stopFunc(e);
　　}
　　$("pop").onclick = function(e){
　　　　stopFunc(e);
　　}
}
function stopFunc(e){
　　document.all? event.cancelBubble = true : e.stopPropagation();
}
</script>
</head>
<body>
<span id="btn">打开层</span>

<div id="pop">
浮层，点击这个浮层以外的区域，都可以隐藏这个浮层，怎么做啊，多谢了
<p><a href="http://www.baidu.com" target="_blank">最主要的是点这个div里面的链接，div照样不隐藏</a></p>
</div>
</body>
</html>

点击div区域以外部分，div区域隐藏的更多相关文章

  1. 实例：vue中点击空白区域关闭某个div图层

    <template> <div class="search" ref="searchMain"> <el-input v-mode ...

  2. 点击除指定区域外的空白处，隐藏div

    <script> $(document).click(function (e) { var $target = $(e.target); //点击.zanpl和.quanzipl以外的地方 ...

  3. 一个大div里面包裹一个小div,里面的小div的点击事件不触发外面的这个大div的点击事件

    一开始上html代码 <div id="div1" style="background: blue;width: 100px; height: 100px;&quo ...

  4. jQuery实现鼠标点击div外的地方div隐藏消失的效果（转）

    转:https://www.cnblogs.com/jsingleegg/p/3456152.html css部分: <style type="text/css">.p ...

  5. jQuery实现鼠标点击div外的地方div隐藏消失的效果

    css部分: <style type="text/css"> .pop { width:200px; height:130px; background:#080;} & ...

  6. 点击文字弹出一个DIV层窗口代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  7. jq自定义下拉菜单，在点击非当前下拉菜单区域时，关闭下拉菜单（点击事件的对象不是目标元素本身）

    jq自定义下拉菜单,在点击非当前下拉菜单区域时,关闭下拉菜单(点击事件的对象不是目标元素本身) //点击非当前下拉菜单区域时,关闭下拉菜单 $(document).mousedown(function ...

  8. jquery效果，多个div，点击任何一个div，那么这个div会切换文字，变换背景颜色，再次点击其他的div ,这个div会发生刚才的变化，之前点击的div的颜色会变回来

    首先css样式: /*原来的背景色*/ .bg { background:'red' } /*需要切换的背景色*/ .bg_click { background:'green' } JS: $('di ...

  9. 告别div，可以代替div的几个标签

    几个最常用的用来代替DIV的HTML5元素 虽说html5中大多数功能性的元素如<video><canvas><audio>等还得不到当前主流浏览器的支持(主要就是 ...

  10. DIV布局之道三：DIV块的覆盖，DIV层遮盖其他DIV

    DIV布局网页的第三种方式:覆盖.DIV覆盖方式经常应用于网页弹出框的制作,例如在网店系统中,当用户没有登录时,点击购买,系统弹出一个登陆框. 请看代码: HTML部分: XML/HTML Code复 ...

随机推荐

  1. Unity3d+Jenkins 自动编译iOS、Android版本

    1.在Unity3d中, 创建导出 iOS.Android 项目脚本 PerformBuild.cs ,放在Editor目录下(必须),如下: using UnityEditor; using Sys ...

  2. PHP简单post验证绕过

    if($_POST[user] && $_POST[pass]) { $conn = mysql_connect("*******", "****&quo ...

  3. Android 画布绘图

    我们已经介绍了Canvas,在那里,已经学习了如何创建自己的View.在第7章中也使用了Canvas来为MapView标注覆盖. 画布(Canvas)是图形编程中一个很普通的概念,通常由三个基本的绘图 ...

  4. 《JAVA与模式》之适配器模式(转)

    在阎宏博士的<JAVA与模式>一书中开头是这样描述适配器(Adapter)模式的: 适配器模式把一个类的接口变换成客户端所期待的另一种接口,从而使原本因接口不匹配而无法在一起工作的两个类能 ...

  5. TCP之心跳包实现思路

    说起网络应用编程,想到最多的就是聊天类的软件.当然,在这类软件中,一般都会有一个用户掉线检测功能.今天我们就通过使用自定义的HeartBeat方式来检测用户的掉线情况. 心跳包实现思路 我们采用的思路 ...

  6. Asp.net Json数据解析的一种思路

    在日常的编码中,经常会遇到JSON类型的数据,有简单的,也有复杂的.对于简单的,我们可以用正则等匹配,但是一旦遇到复杂的,就比较难办了. 数据分析 目前手头上需要制作一个天气预报功能,现成的接口已经有 ...

  7. 学习Shell脚本编程（第3期）_在Shell程序中使用的参数

    位置参数 内部参数 如同ls命令可以接受目录等作为它的参数一样,在Shell编程时同样可以使用参数.Shell程序中的参数分为位置参数和内部参数等. 3.1 位置参数 由系统提供的参数称为位置参数.位 ...

  8. File类和RandomAccessFile类

    目录 File类     File类常用操作     (1)创建文件     (2)删除文件     (3)创建文件夹     (4)列出指定目录全部文件     (5)删除目录 RandomAcce ...

  9. HDU3923-Invoker-polya n次二面体

    polya定理.等价类的个数等于∑颜色数^置换的轮换个数 不可翻转的串当中.直接计算∑m^(gcd(n,i)) ,这里gcd(n,i)就是第i个置换的轮换数. 翻转的情况再分n奇偶讨论. n次二面体都 ...

  10. 由外边距合并到BFC

    置顶文章:<纯CSS打造银色MacBook Air(完整版)> 上一篇:<JavaScript实现Ajax小结> 作者主页:myvin 博主QQ:851399101(点击QQ和 ...