请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

CSS弹出层,始终屏幕居中,滚动居中,背景变暗

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <title>弹出层,弹出后背景变暗</title>
  6. <style type="text/css">
  7. html,body{width:100%;height:100%}
  8. #overDiv{
  9.         background-color: #000;
  10.         width: 100%;
  11.         height: 100%;
  12.         left:0;
  13.         top:0;/*FF IE7*/
  14.         filter:alpha(opacity=40);/*IE*/
  15.         opacity:0.4;/*FF*/
  16.         z-index:1;
  17.         position:fixed!important;/*FF IE7*/
  18.         position:absolute;/*IE6*/
  19.         _top:       expression(eval(document.compatMode &&
  20.         document.compatMode=='CSS1Compat') ?
  21.         documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
  22.         document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/
  23. }
  24. #dlDiv{
  25.         background-color: #000;
  26.         border:2px solid #06F;
  27.         z-index:2;
  28.         width: 400px;
  29.         height: 300px;
  30.         left:43%;/*FF IE7*/
  31.         top:37%;/*FF IE7*/
  32.         margin-left:-150px!important;/*FF IE7 该值为本身宽的一半 */
  33.         margin-top:-60px!important;/*FF IE7 该值为本身高的一半*/
  34.         margin-top:0px;
  35.         position:fixed!important;/*FF IE7*/
  36.         position:absolute;/*IE6*/
  37.         _top:       expression(eval(document.compatMode &&
  38.         document.compatMode=='CSS1Compat') ?
  39.         documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
  40.         document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/
  41. }
  42. .lobu{
  43.         width:65px;
  44.         height:25px;
  45.         background:#FFFFFF;
  46.         font-size:13px;
  47.         border:#0099CC solid 1px;
  48. }
  49. </style>
  50. <script type="text/javascript">
  51.         function show(){
  52.                 document.getElementById("overDiv").style.display = "block" ;
  53.                 document.getElementById("dlDiv").style.display = "block" ;
  54.         }
  55.         function closeDiv(){
  56.                 document.getElementById("overDiv").style.display = "none" ;
  57.                 document.getElementById("dlDiv").style.display = "none" ;
  58.         }
  59. </script>
  60. </head>
  61. <body style="height:2000px;">
  62. <div id="dlDiv" style="display:none;">
  63. <div id="dlTitle"></div>
  64.     <table width="250" height="136" border="0" cellpadding="0" cellspacing="0" align="center">
  65.               <tr>
  66.                 <td width="62" height="24" align="center">账 号:</td>
  67.                 <td colspan="2"><input type="text" class="input" id="code" onFocus="OnFocus()" value="" maxlength="50" /></td>
  68.               </tr>
  69.               <tr>
  70.                 <td height="24" align="center">密 码:</td>
  71.                 <td colspan="2">
  72.                     <input type="password" class="input" id="pass" onFocus="OnFocus()" maxlength="50" />
  73.                 </td>
  74.               </tr>
  75.               <tr>
  76.                 <td height="31" align="center">验证码:</td>
  77.                 <td width="124"><input type="text" id="rand" size="7" maxlength="4" onFocus="OnFocus()" class="check_code" width="50px;"/></td>
  78.                 <td width="134"><span id="CNumber" title="点击刷新验证码"><img src="" id="code" onClick="" width="50" height="30"/></span></td>
  79.               </tr>
  80.               <tr>
  81.                 <td height="28" align="center">角 色:</td>
  82.                 <td colspan="2" id="dljs"></td>
  83.               </tr>
  84.               <tr>
  85.                 <td height="28" align="center">平 台:</td>
  86.                 <td colspan="2">
  87.                 <select name="pt" id="pt">
  88.                     <option value="bx" selected="selected">不限平台</option>
  89.                 </select>
  90.                 </td>
  91.               </tr>
  92.               <tr>
  93.                 <td colspan="3" align="left">
  94.                     <input type="button"  id="login" class="lobu" onClick="" value="登 录">  
  95.           <input type="button" id="redo" class="lobu" onClick="closeDiv();" value="返 回">
  96.                 </td>
  97.               </tr>
  98.               <tr><td colspan="3"><div id="message"></div></td></tr>
  99.           </table>
  100. </div>
  101. <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  102. <input type="button" onclick="show()" value="背景变灰色">
  103. <div id="overDiv" style="display:none;"></div>
  104. </body>
  105. </html>
复制代码


回复

使用道具 举报

大神点评1

巨菲兔bnj 2015-1-5 09:08:49 显示全部楼层
看后感悟了点,收下了












windows7安装版64位  windows xp安装盘下载    http://www.809k.cn/kvx  www.817g.cn/hqpt 惠普装win7系统
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

    热门帖子
  • 精华
  • 新帖
快速回复 返回顶部 返回列表