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 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"?
必须加双引号