点击div区域以外部分，div区域隐藏
核心思想：
监听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区域隐藏的更多相关文章
- 实例：vue中点击空白区域关闭某个div图层
<template> <div class="search" ref="searchMain"> <el-input v-mode ...
- 点击除指定区域外的空白处，隐藏div
<script> $(document).click(function (e) { var $target = $(e.target); //点击.zanpl和.quanzipl以外的地方 ...
- 一个大div里面包裹一个小div,里面的小div的点击事件不触发外面的这个大div的点击事件
一开始上html代码 <div id="div1" style="background: blue;width: 100px; height: 100px;&quo ...
- jQuery实现鼠标点击div外的地方div隐藏消失的效果（转）
转:https://www.cnblogs.com/jsingleegg/p/3456152.html css部分: <style type="text/css">.p ...
- jQuery实现鼠标点击div外的地方div隐藏消失的效果
css部分: <style type="text/css"> .pop { width:200px; height:130px; background:#080;} & ...
- 点击文字弹出一个DIV层窗口代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
- jq自定义下拉菜单，在点击非当前下拉菜单区域时，关闭下拉菜单（点击事件的对象不是目标元素本身）
jq自定义下拉菜单,在点击非当前下拉菜单区域时,关闭下拉菜单(点击事件的对象不是目标元素本身) //点击非当前下拉菜单区域时,关闭下拉菜单 $(document).mousedown(function ...
- jquery效果，多个div，点击任何一个div，那么这个div会切换文字，变换背景颜色，再次点击其他的div ,这个div会发生刚才的变化，之前点击的div的颜色会变回来
首先css样式: /*原来的背景色*/ .bg { background:'red' } /*需要切换的背景色*/ .bg_click { background:'green' } JS: $('di ...
- 告别div，可以代替div的几个标签
几个最常用的用来代替DIV的HTML5元素 虽说html5中大多数功能性的元素如<video><canvas><audio>等还得不到当前主流浏览器的支持(主要就是 ...
- DIV布局之道三：DIV块的覆盖，DIV层遮盖其他DIV
DIV布局网页的第三种方式:覆盖.DIV覆盖方式经常应用于网页弹出框的制作,例如在网店系统中,当用户没有登录时,点击购买,系统弹出一个登陆框. 请看代码: HTML部分: XML/HTML Code复 ...
随机推荐
- Redis缓存数据库详解
Redis最为常用的数据类型主要有以下五种: 1)String 2)Hash 3)List 4)Set 5)Sorted set 在具体描述这几种数据类型之前,我们先通过一张图了解下Redis内部内存 ...
- Swift3.0 iOS获取当前时间 - 年月日时分秒星期
Swift3.0 iOS获取当前时间 - 年月日时分秒星期func getTimes() -> [Int] { var timers: [Int] = [] // 返回的数组 let calen ...
- CHAP认证原理
整个过程就是PPP协商过程,分三步:LCP.认证.NCP. 一 协议概述 PPP包含以下两个层次的协议: ·链路控制协议(LCP):负责建立.配置和测试数据链路连接 ·网络控制协议(NCP):负责建立 ...
- CAN开发中遇到的奇怪问题
问题背景: 之前在做USBCAN2开发过程中,遇到一个奇葩问题,当我们加上其中某一句代码时,我们的程序会走不下去,得不到数据,而且在调试的过程中,你也不能暂停,不然,你也得不到数据.后来参考网上一篇帖 ...
- Volly框架的使用基础版及使用中的一些坑 Ace 网络篇(三)
直接把注释粘过来: * Volley使用讲解: * 要实现网络数据请求主要要记住下面三步骤: * 1.创建RequestQueue对象 * 2.创建XXRequest对象(XX代表String,JSO ...
- 一道c语言运算符优先级问题
一道c语言运算符优先级问题 #include <iostream> using namespace std; int main() { char test[] = {"This ...
- Linux及安全课程——相关链接总结
附录:学习笔记链接总结 MOOC课程学习笔记与实验: 第一周:计算机是如何工作的 第二周:操作系统是怎么工作的 -- 一个简单的时间片轮转多道程序内核代码及分析 第三周:构造一个简单的Linux系统M ...
- 信息安全系统设计基础实验五 20135210&20135218
北京电子科技学院(BESTI) 实 验 报 告 课程:信息安全系统设计基础 班级: 1352 姓名:程涵,姬梦馨 学号:2013521 ...
- Arduino智能小车实践学习报告
Arduino智能小车实践学习报告 参与人员: 20135316 王剑桥 20135312 吴汉彦 20135319 朱锂 一. 背景了解: 单片机:将中央处理单元CPU(进行运算.控制).随机存储器 ...
- iOS开发系列--音频播放（音效和音乐）播放本地的
音频 在iOS中音频播放从形式上可以分为音效播放和音乐播放.前者主要指的是一些短音频播放,通常作为 点缀音频,对于这类音频不需要进行进度.循环等控制.后者指的是一些较长的音频,通常是主音频,对于这些音 ...