弹出层
额 把原先收集的几个弹出层的写法贴出来备份一下，虽然现在不用了 但还是很有必要的
第一个
<%@ 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>
<script>
function locking() {
document.all.ly.style.display = "block";
document.all.ly.style.width = document.body.clientWidth;
document.all.ly.style.height = document.body.clientHeight;
document.all.Layer2.style.display = 'block';
}
function Lock_CheckForm(theForm) {
document.all.ly.style.display = 'none';
document.all.Layer2.style.display = 'none';
return false;
}
</script>
</head>
<body>
<p align="center">
<input type="button" value="系统锁定" onClick="locking()">>
</p>
<div id="ly"
style="position: absolute; top: 0px; filter: alpha(opacity = 60); background-color: #777; z-index: 2; left: 0px; display: none;">
</div>
<!-- 浮层框架开始 -->
<div id="Layer2"
style="position: absolute; z-index: 3; left: expression_r(( document.body.offsetWidth-540)/2 ); top: expression_r(( document.body.offsetHeight-170)/2 ); background-color: #fff; display: none;">
<table width="540" border="0" cellpadding="0" cellspacing="0"
style="border: 0 solid #e7e3e7; border-collapse: collapse">
<tr>
<td
style="background-color: #73A2d6; color: #fff; padding-left: 4px; padding-top: 2px; font-weight: bold; font-size: 14px;"
height="27" valign="middle">[ 警 告 ]</td>
</tr>
<tr>
<td height="130" align="center"><input type="button"
value=" 确定 " onClick="Lock_CheckForm(this);"></td>
</tr>
</table>
</div>
<!-- 浮层框架结束 -->
</body>
</html>
第二个
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>点击按钮，弹出一个层</title>
<script>
var docEle = function() {
return document.getElementById(arguments[0]) || false;
}
function openNewDiv(_id) {
var m = "mask";
if (docEle(_id))
document.removeChild(docEle(_id));
if (docEle(m))
document.removeChild(docEle(m));
// 新激活图层
var newDiv = document.createElement("div");
newDiv.id = _id;
newDiv.style.position = "absolute";
newDiv.style.zIndex = "9999";
newDiv.style.width = "200px";
newDiv.style.height = "300px";
newDiv.style.top = "100px";
newDiv.style.left = (parseInt(document.body.scrollWidth) - 300) / 2
+ "px"; // 屏幕居中
newDiv.style.background = "#EFEFEF";
newDiv.style.border = "1px solid #860001";
newDiv.style.padding = "5px";
newDiv.innerHTML = "新激活图层内容";
document.body.appendChild(newDiv);
// mask图层
var newMask = document.createElement("div");
newMask.id = m;
newMask.style.position = "absolute";
newMask.style.zIndex = "1";
newMask.style.width = document.body.scrollWidth + "px";
newMask.style.height = document.body.scrollHeight + "px";
newMask.style.top = "0px";
newMask.style.left = "0px";
newMask.style.background = "#000";
newMask.style.filter = "alpha(opacity=40)";
newMask.style.opacity = "0.40";
document.body.appendChild(newMask);
// 关闭mask和新图层
var newA = document.createElement("a");
newA.href = "#";
newA.innerHTML = "关闭激活层";
newA.onclick = function() {
document.body.removeChild(docEle(_id));
document.body.removeChild(docEle(m));
return false;
}
newDiv.appendChild(newA);
}
</script>
</head>
<body>
<input type="button" value=" 点这里 " onclick="openNewDiv(1)" />
</body>
</html>
第三个
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>JS弹出层</title>
<script type="text/javascript">
var addObj = "obj";//要弹出的隐藏的DIV的ID
var addWidth = "300";
var addHeight = "180";
var TouMingDu = "30";//设置背景层的透明度
var SuDu = "10";//设置弹出DIV的速度，值越小速度越大
var ZhenBiColor = "#000000";
var DIVColor = "White";
//必选 szaddObj：隐藏DIV的值 如"obj"，
//可选 szTouMingDu背景层的透明度值小 越透明 如 "30"，
//可选 szSuDu弹出div的速度 值越小速度越大 如 "10"
//可选 szZhenBiColor 透明层的颜色 如"#000000"
//可选 szDIVColor 弹出div的颜色 如"White"；
function ChuangJianDIV(szaddObj, szaddWidth, szaddHeight, szTouMingDu,
szSuDu, szZhenBiColor, szDIVColor) {
if (szaddObj == null) {
alert("要弹出的隐藏div的id不能空");
return;
}
if (szaddObj != null && szaddObj != "")
addObj = szaddObj;
if (szaddWidth != null && szaddWidth != "")
addWidth = szaddWidth;
if (szaddHeight != null && szaddHeight != "")
addHeight = szaddHeight;
if (szTouMingDu != null && szTouMingDu != "")
TouMingDu = szTouMingDu;
if (szSuDu != null && szSuDu != "")
SuDu = szSuDu;
if (szZhenBiColor != null && szZhenBiColor != "")
ZhenBiColor = szZhenBiColor;
if (szDIVColor != null && szDIVColor != "")
DIVColor = szDIVColor;
ZhenBi();
DIV();
JiaZhaiDiv();
}
//弹出div背景层
function ZhenBi() {
var ZheBiDIV = document.createElement("div");
ZheBiDIV.setAttribute("id", "tccbg");
ZheBiDIV.style.position = "absolute";
ZheBiDIV.style.border = "none";
ZheBiDIV.style.top = "0px";
ZheBiDIV.style.background = ZhenBiColor;
ZheBiDIV.style.zIndex = 99;
ZheBiDIV.style.width = window.screen.width;
ZheBiDIV.style.height = (document.body.scrollHeight > window.screen.height ? document.body.scrollHeight
: window.screen.height) + 50;
ZheBiDIV.style.filter = "alpha(opacity=" + TouMingDu + ")";
document.body.appendChild(ZheBiDIV);
}
//弹出div工作层
function DIV() {
var DIV = document.createElement("div");
DIV.setAttribute("id", "wxjtcc");
DIV.style.position = "absolute";
DIV.style.border = "none";
DIV.style.background = DIVColor;
DIV.style.zIndex = 99;
DIV.style.top = document.documentElement.scrollTop
+ window.screen.height / 2 - 100;
DIV.style.left = window.screen.width / 2;
document.body.appendChild(DIV);
DIV.style.width = "50";
DIV.style.height = "50";
}
//逐步扩展div的宽和高
function JiaZhaiDiv() {
var obj = document.getElementById("wxjtcc");
var width = document.getElementById("wxjtcc").offsetWidth;
var height = document.getElementById("wxjtcc").offsetHeight;
var left = document.getElementById("wxjtcc").offsetLeft;
var top = document.getElementById("wxjtcc").offsetTop;
var objDiv = document.getElementById("wxjtcc").offsetHeight;
;
obj.style.left = left - 2.5;
obj.style.top = top - addHeight / addWidth * 5 / 2;
obj.style.width = (width + 5);
obj.style.height = (height + addHeight / addWidth * 5);
if (width < addWidth) {
setTimeout("JiaZhaiDiv()", SuDu);
} else {
//加载隐藏的div
var obj = document.getElementById(addObj);
obj.style.height = height;
obj.style.width = width;
obj.style.position = "absolute";
obj.style.top = top - 5;
obj.style.left = left - 5;
obj.style.zIndex = 100;
obj.style.display = "";
}
}
function Close() {
var obj = document.getElementById("wxjtcc");
var obj2 = document.getElementById(addObj);
if (obj2.style.display == "") {
obj2.style.display = "none";
}
var width = document.getElementById("wxjtcc").offsetWidth;
var height = document.getElementById("wxjtcc").offsetHeight;
var left = document.getElementById("wxjtcc").offsetLeft;
var top = document.getElementById("wxjtcc").offsetTop;
var objDiv = document.getElementById("wxjtcc").offsetHeight;
obj.style.left = left + 2.5;
obj.style.top = top + addHeight / addWidth * 5 / 2;
obj.style.width = (width - 5);
obj.style.height = (height - addHeight / addWidth * 5);
if (width <= 10) {
var obj2 = document.getElementById("wxjtcc");
var obj3 = document.getElementById("tccbg");
obj2.style.display = "none";
obj2.parentNode.removeChild(obj2);
obj3.style.display = "none";
obj3.parentNode.removeChild(obj3);
return;
} else {
var h = setTimeout("Close()", SuDu);
}
if (width != 500) {
var obj = document.getElementById(addObj);
obj.style.display = "none";
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="aaa" style="display: none">
<img src="bg.gif" onclick="Close()" ;/>
</div>
<input id="Button3" type="button"
onclick="ChuangJianDIV('aaa','400','300','','','#0fffff','');"
value="button" />
</div>
</form>
</body>
</html>