`
tigerl
  • 浏览: 97192 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

空白处点击关闭DIV层

空白处点击关闭DIV层 
阅读更多
继续以我的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();
				}
			})
分享到：
| 关于IE8、9下DIV不居中的问题解决方案
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics