继续以我的
DIV+JS弹出层并置灰窗口为不可点击状态 为例，在弹出层以后，有时候会有这样一种需求，需要在层以外的空白地方根据鼠标点击事件空白处关闭弹出层！这是个很有意思的东西，其实很简单，不像网上大多数人给出的代码那样复杂，原理就是捕获拦截鼠标按下事件，拿到事件句柄，在做完自己的处理后，继续向下传播或者阻止事件继续向下传播。
看代码：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<title>弹出层</title>
<meta http-equiv="Content-type" content="text/html;charset=utf-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="description" content="This is my page">
<style>
body {
margin: 0 0;
padding: 0 0;
}
.myd {
height: 100%;
margin: 0 0;
padding: 0 0; width : 100%;
position: absolute;
z-index: 10000;
background-color: gray;
width: 100%;
opacity:0.8;/* 实现透明 */
}
.pd {
background: #c2ee11;
height: 300px;
width: 450px;
position: absolute;
z-index: 10002;
}
</style>
</head>
<script type="text/javascript">
var flag=1;
//这是核心的地方，用来拦截鼠标点击事件
function fnOnMouse(event){
flag = flag+1;
document.getElementById("binfo").innerHTML=flag;
var targ;
if (!e)
var e = window.event;
if (e.target)
targ = e.target;
else if (e.srcElement)
targ = e.srcElement
if (targ.nodeType == 3) // defeat Safari bug
targ = targ.parentNode
var tname;
tname=targ.tagName;
//这里的对象是弹出层的display属性值，根据自己的ID属性来进行相应的业务逻辑处理，根据需要决定事件是否需要继续向下传播，返回true即传播，false不传播，这是js本身，没有使用任何第三方js库
var pds = document.getElementById("pd").style.display;
var f = (tname == "DIV" && pds == "block" && targ.id == "pd");
if(!f){
close_div();
}else{
return false;
}
return true;
}
//window.onmousedown = fnOnMouse;
function pop(){
document.getElementById("md").style.display="block";
//clientWidth取的是实际窗口文档域的大小
var _x = document.body.clientWidth;
var _y = document.body.clientHeight;
var a_w = 450;
var a_h = 300;
//alert(_x+" == " + _y);
//计算弹出层的位置，目的是要显示在正中间
var dleft = _x/2 - a_w/2;
var dtop = _y/2 - a_h/2;
var cd = document.getElementById("pd").style;
cd.left=dleft+"px";
cd.top = dtop+"px";
cd.display="block";
}
function close_div(){
document.getElementById("md").style.display="none";
document.getElementById("pd").style.display="none";
}
</script>
<body onmousedown="fnOnMouse(event)">
<!-- 遮盖层 -->
<div class="myd" style="display: none;" id="md"></div>
<!-- 弹出层 -->
<div class="pd" style="display: none" id="pd">
<button onclick="close_div()"
style="height: 20px;background: red;width: 100%;text-align: right">
点击关闭层：X</button>
<label>这里是要显示的内容</label>
</div>
<input type="button" onclick="pop()" value="弹出层">
<br> This is my JSP page.
<br>
<div style="width:100%;height: 100px;background: red;" id="binfo"
onclick="alert(1);"></div>
<span onclick="alert('so easy...');"
style="margin: 20px auto;height: 100px;width: 100%; display:inline-block; background-color: gray;">
click me,the dom event will still continue to propagate normally </span>
<br> This is my JSP page.
<br> This is my JSP page.
<br> This is my JSP page.
<br> This is my JSP page.
<br> This is my JSP page.
<br> This is my JSP page.
<br> This is my JSP page.
<br> This is my JSP page.
<br> This is my JSP page.
<br> This is my JSP page.
<br> This is my JSP page.
<br> This is my JSP page.
<br> This is my JSP page.
<br> This is my JSP page.
<br> This is my JSP page.
<br> This is my JSP page.
<br>
</body>
</html>
如果弹出层里有好多元素，那么建议使用jquery选择器，在上面的例子中，弹出层顶级元素的ID是pd，所以要实现在pd元素以外的任何空白或不空白的地方点击事件同时关闭弹出层则使用jquery选择器很简单：
$(document).bind("click",function(e){
var target = $(e.target);
if(target.closest("#pd").length == 0){
$("#pd").hide();
}
})
分享到：
相关推荐
在Vue.js中，有时我们需要实现一个功能，即当弹出框或者Popover显示后，用户点击页面空白区域可以自动隐藏这些元素。以下将介绍三种实现这一功能的方法：手动监听判断、自定义指令以及使用遮罩层。 ### 第一种方式...
模态框（Modal）是覆盖在父窗体上的子窗体。通常，目的是显示来自一...backdrop:static时,空白处不关闭. keyboard:false时,esc键盘不关闭. 上述代码也用于打开模态框。 也可以使用以下方法： <div class="modal
本主题聚焦于一个常见的功能实现：使用原生JavaScript实现点击文字或小图时弹出层的效果，并通过点击特定按钮关闭这个弹出层。这个功能在网页设计中十分常见，例如在显示详细信息、弹窗提示或者图片预览等场景。 ...
我们在网站开发的时候经常会有点击空白处去隐藏已有的元素，DIV或者其他，本次教给大家如何用jquery实现这个特效的方法。 一款jQuery点击空白处隐藏弹出层网页特效，点击按钮弹出层、点击页面空白处弹出层消失JS代码...
包含两个页面和一张百度网址的二维码图片，index-flex.html展示的是flex布局绝对居中写法和遮罩层点击空白处关闭的方法一。index-transform.html展示的是利用transform属性偏移进行绝对居中和遮罩层点击空白处关闭的...
### 示例3：点击关闭按钮或空白处关闭弹出层 这个例子与第一个示例类似，但增加了关闭按钮的功能。 ```html <!DOCTYPE html> <title>jQuery点击空白处关闭弹出层 <style>#box{width:300px;height:200px;border...
// 点击空白处隐藏弹出层 $("body").click(function(event) { var _con = $('.tkyy_con'); // 定义目标区域 if (!_con.is(event.target) && _con.has(event.target).length == 0) { $('.marsk-container').hide...
16. 对文本和图象设置超链接，选中内容后在属性面板输入 URL，文本会变为蓝色下划线，选项 C 错误，因为设置后不需要额外点击空白处。 17. 图像超链接的代替文本主要用于浏览器不支持图像或关闭图像显示时的文字...
在Windows中，要改变窗口的排列方式，可以使用鼠标右键单击任务栏空白处，然后在弹出的快捷菜单中选择相应的排列方式。 **拓展内容：** - **窗口排列选项**：层叠窗口、堆叠显示窗口、并排显示窗口等。 - **窗口...
修改高级表格支持库在表格空白处（所有单元格之外）单击鼠标导致当前光标处单元格自动进入编辑状态的BUG。 14. 修改扩展界面支持库一，为“超级列表框”增加“检查框状态被改变”事件。 15. 修改扩展界面支持库一...