DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> js+css 實現遮罩居中彈出層
js+css 實現遮罩居中彈出層
編輯:JavaScript綜合知識     

 本文為大家詳細介紹下使用js實現遮罩彈出層居中,且隨浏覽器窗口滾動條滾動,示例代碼如下,感興趣的朋友可以參考下

js+css 實現遮罩居中彈出層(隨浏覽器窗口滾動條滾動)   代碼如下: <!doctype html>  <head>  <meta charset="utf-8" />  <title></title>  <style type="text/css">  *{}{margin:0;padding:0;}  html{}{_background:url(about:blank);} /**//* 阻止閃動 in IE6 , 把空文件換成about:blank , 減少請求 */  body{}{background:#fff; font: 12px/1.5 Tahoma,Geneva, 5b8b4f53, sans-serif; height:100%;}  .wrap{}{height:980px; padding-top:20px;text-align:center;}  p{}{font-size:14px;text-align:center;line-height:24px;}  /**//** 遮罩層 **/  #masklayer{}{  background:#000;  display:none;  filter:alpha(opacity = 50);  opacity:0.5;  top:0;  left:0;  height:100%;  width:100%;  z-index:999;  position:fixed;  _position:absolute;  _left: expression(documentElement.scrollLeft + documentElement.clientWidth - this.offsetWidth);  _top: expression(documentElement.scrollTop + documentElement.clientHeight - this.offsetHeight);  }  /**//** 彈出層 **/  #popup{}{  display:none;  width:300px;  z-index:1000;  left:50%;  top:50%;  position:fixed!important;  margin-left:-150px !important;  _position:absolute;  _top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat')?  documentElement.scrollTop + (document.documentElement.clientHeight - this.offsetHeight)/2: /**//*IE6*/  document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2); /**//*IE5 IE5.5*/  }  .content{}{background:#f3f3f3;border:1px solid #999;}  .content h3{}{background:#a0a0a0;color:#fff;font-size:14px;height:32px;line-height:32px; padding-left:5px;}  #clickbtn{}{margin-top:20px;}  </style>  </head>  <body>  <div class="wrap">  <p>  我是正文我是正文我是正文我是正文我是正文我是正文我是正文  <br />  我是正文我是正文我是正文我是正文我是正文我是正文我是正文  <br />  我是正文我是正文我是正文我是正文我是正文我是正文我是正文  <br />  我是正文我是正文我是正文我是正文我是正文我是正文我是正文  <br />  我是正文我是正文我是正文我是正文我是正文我是正文我是正文  </p>  <input type="button" id="clickbtn" value="clike me" />  </div>  <div id="masklayer"></div>  <div id="popup">  <div class="content">  <h3>我是彈出層 有沒有居中?</h3>  <p>居中居中居中居中居中居中</p>  <p>居中居中居中居中居中</p>  <p>居中居中居中居中</p>  <p>居中居中居中</p>  </div>  </div>  <script type="text/javascript">  (function(masklayer){  var clickbtn = document.getElementById('clickbtn');  clickbtn.onclick = function(){  var popup = document.getElementById('popup');  masklayer.style.display='block';  popup.style.display ='block';  var h = popup.clientHeight;  with(popup.style){  marginTop = -h/2+'px';  }  }  })(document.getElementById('masklayer'))  </script>  </body>    </html>     
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved