js兑现弹出层
日期：2014-05-16 浏览次数：20498 次
js实现弹出层
下面是一个JavaScript代码实现的弹出层效果
?
<html>
<head>
<style type="text/css">
#tranDiv {
position:absolute;
left:0px;
top:0px;
}
#tranDivBack {
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
background-color:#000000;
filter:alpha(Opacity=30);
-moz-opacity:0.3;
opacity:0.3;
}
#infoDiv {
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
text-align:center;
}
.pop_box {
background:#FFF;
padding:10px;
border:#666 8px solid;
}
</style>
<script language="javascript">
function showWindow(width,height){
location.href="#";
var windowstr= document.getElementById("popLayer").innerHTML;
document.getElementById("infoDiv").innerHTML=windowstr;
document.getElementById("infoDiv").style.left=((document.body.clientWidth-width)>0?(document.body.clientWidth-width):0)/2+"px";
document.getElementById("infoDiv").style.top=100+"px";
document.getElementById("infoDiv").style.zIndex=10001;
document.getElementById("infoDiv").style.width=width+"px";
document.getElementById("infoDiv").style.height=height+"px";
document.getElementById("tranDiv").style.height=document.body.clientHeight+ "px";
document.getElementById("tranDiv").style.width=document.body.clientWidth+ "px";
document.getElementById("tranDiv").style.display="";
document.getElementById("tranDivBack").style.display="";
document.getElementById("tranDivBack").style.zIndex=10000;
document.getElementById("infoDiv").style.display="";
}
function closeWindow(){
document.getElementById("tranDiv").style.display="none";
}
function changeVal() {
var time = document.getElementById("time");
time.value = "";
//alert(document.getElementById("link").innerHTML);
}
function getVal() {
var time = document.getElementById("time").value;
var patrn = /[0-9]/;
if(!patrn.exec(time)) {
alert("内容只能为整数，请重新输入！");
return false;
}
if(time <= 0) {
alert("设置时间应该大于0，请重新输入！");
return false;
}
document.getElementById("link").innerHTML = time;
//alert(document.getElementById("link").innerHTML);
document.getElementById("timeVal").value = document.getElementById("link").innerHTML;
alert(document.getElementById("timeVal").value);
closeWindow();
}
</script>
</head>
<div id="tranDiv" style="display:none;">
<div id="tranDivBack"></div>
<div id="infoDiv"></div>
</div>
<div id="popLayer" style="display:none;">
<div class="pop_box">
时间：<input type="text" value="小时（整数）" id="time" name="time" onClick="return changeVal();" /><br/>
<input type="button" value="确定" onClick="return getVal();"/>
<input type="button" value="关闭" onClick="return closeWindow();" />
</div>
</div>
测试程序：<a id="link" href="javascript:showWindow(250,60);">时间</a>
<input type="hidden" id="timeVal" value="0" />
</html>
?注：document.getElementById("infoDiv").style.width在Firefox中必须为下面样式：
?
document.getElementById("infoDiv").style.width="180px"
?
必须加双引号
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
