当前位置: 代码迷 >> Web前端 >> Div 兑现弹出层
  详细解决方案

Div 兑现弹出层

热度:90   发布时间:2012-11-01 11:11:32.0
Div 实现弹出层

<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" align="center" style="position: absolute; z-index: 3; left: expression((document.body.offsetWidth-540)/2); top: expression((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">
??????????????????? [&nbsp;警&nbsp;告&nbsp;]?
??????????????? </td>
??????????? </tr>
??????????? <tr>
??????????????? <td height="130" align="center">123456789
??????????????????? <input type="button" value=" 确定 " onclick="Lock_CheckForm(this);">
??????????????? </td>
??????????? </tr>
??????? </table>
??? </div>
?<!-- 弹出层结束 -->
</body>
</html>

  相关解决方案