DIV+JS弹出层并置灰窗口替不可点击状态
日期：2014-05-16 浏览次数：20474 次
DIV+JS弹出层并置灰窗口为不可点击状态
闲来无事，一直觉得在页面弹出一个DIV层，并把窗口置为不可点击态很好，就试了试，网上找的代码都比较复杂，不一定复杂的就是最好的！自己写了个比较简单的就几行代码！很简单的几行css，几行js，几个div。IE，360SE，火狐下测试可以完美弹出，全屏遮盖！
直接看代码：
或者直接下载附件，运行看效果
闲来无事，一直觉得在页面弹出一个DIV层，并把窗口置为不可点击态很好，就试了试，网上找的代码都比较复杂，不一定复杂的就是最好的！自己写了个比较简单的就几行代码！很简单的几行css，几行js，几个div。IE，360SE，火狐下测试可以完美弹出，全屏遮盖！
直接看代码：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>弹出层</title>
<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>
.myd{
background: #77887E ;
height: 100%;
left: 0%;
right: 0%;
width: 100%;
position: absolute;
z-index: 10000;
}
.pd{
background: #c2ee11 ;
height: 300px;
width: 450px;
position: absolute;
z-index: 10002;
}
</style>
</head>
<script type="text/javascript">
//var ie_name = navigator.appName;
function pop(){
var b = document.body;
//设置边距为0，是为了全屏遮盖，否则上、右两边会留有边距，不能全屏遮盖
b.style.margin=0;
document.getElementById("md").style.display="block";
//实现透明遮盖，如果不需要透明，不需要设置此属性
document.getElementById("md").style.filter="alpha(opacity=80)";
//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;
//alert(dleft+" == "+dtop);
var cd = document.getElementById("pd").style;
//cd.setAttribute("left",dleft+"px");
//cd.setAttribute("top",dtop+"px");
cd.left=dleft+"px";
cd.top = dtop+"px";
cd.display="block"; }
function close_div(){
document.body.style.margin="";
document.getElementById("md").style.display="none";
document.getElementById("pd").style.display="none";
}
</script>
<body>
<!-- 遮盖层 -->
<div class="myd" style="display: none" id="md"></div>
<!-- 弹出层 -->
<div class="pd" style="display: none" id="pd">
<div style="height: 20px;background: red;width: 100%;text-align: right">
点击关闭层：<button onclick="close_div()">X</button>
</div>
<label>这里是要显示的内容</label>
</div>
<input type="button" onclick="pop()" value="弹出层"> <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>
This is my JSP page. <br>
</body>
</html>
或者直接下载附件，运行看效果
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
