可以防止滾動條影響的全屏遮罩效果

-Advertisement-

可以防止滾動條影響的全屏遮罩效果:遮罩效果當前在很多應用中都有使用，當然也比較簡單，無非是在需要的時候出現一個具有透明效果的全屏元素，但是有一種情況需要特別註意一下，那就是頁面出現滾動條的時候，這個時候如不進行一下處理，遮罩層效果的表現可能不倫不類。代碼如下:螞蟻部落螞蟻部...

可以防止滾動條影響的全屏遮罩效果:
遮罩效果當前在很多應用中都有使用，當然也比較簡單，無非是在需要的時候出現一個具有透明效果的全屏元素，但是有一種情況需要特別註意一下，那就是頁面出現滾動條的時候，這個時候如不進行一下處理，遮罩層效果的表現可能不倫不類。
代碼如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css"> 
*{ 
  margin:0px; 
  padding:0px; 
} 
.zhezhao{ 
  width:100%; 
  height:100%; 
  background-color:#000; 
  filter:alpha(opacity=50); 
  -moz-opacity:0.5; 
  opacity:0.5; 
  position:absolute; 
  left:0px; 
  top:0px; 
  display:none; 
  z-index:1000; 
} 
.login{ 
  width:280px; 
  height:180px; 
  position:absolute; 
  top:200px; 
  left:50%; 
  background-color:#000; 
  margin-left:-140px; 
  display:none; 
  z-index:1500;
  text-align:right; 
} 
.content{ 
  margin-top:50px; 
  color:red; 
  line-height:200px; 
  height:200px; 
  text-align:center; 
} 
</style> 
<script type="text/javascript"> 
window.onload=function(){ 
  var zhezhao=document.getElementById("zhezhao"); 
  var login=document.getElementById("login"); 
  var bt=document.getElementById("bt"); 
  var btclose=document.getElementById("btclose"); 
   
  bt.onclick=function(){ 
    zhezhao.style.display="block"; 
    login.style.display="block"; 
  } 
  btclose.onclick=function(){ 
    zhezhao.style.display="none"; 
    login.style.display="none";  
  } 
} 
</script> 
</head> 
<body style="height:1000px;"> 
  <div class="zhezhao" id="zhezhao"></div> 
  <div class="login" id="login"><input type="button" id="btclose" value="點擊關閉"/></div>  
  <div class="content">螞蟻部落歡迎您，<input type="button" value="查看效果" id="bt"/></div> 
</body> 
</html>

上面的代碼中，點擊按鈕可以彈出遮罩層效果，但是向下拖動滾動條，則會發現下麵的部分並沒有遮罩，那麼此效果也就失敗了，代碼修改如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css"> 
*{ 
  margin:0px; 
  padding:0px; 
}
html{height:100%}
.zhezhao{ 
  width:100%; 
  height:100%; 
  background-color:#000; 
  filter:alpha(opacity=50); 
  -moz-opacity:0.5; 
  opacity:0.5; 
  position:absolute; 
  left:0px; 
  top:0px; 
  display:none; 
  z-index:1000; 
} 
.login{ 
  width:280px; 
  height:180px; 
  position:absolute; 
  top:200px; 
  left:50%; 
  background-color:#000; 
  margin-left:-140px; 
  display:none; 
  z-index:1500;
  text-align:right; 
} 
.content{ 
  margin-top:50px; 
  color:red; 
  line-height:200px; 
  height:200px; 
  text-align:center; 
} 
#middle{
  width:30px;
  height:1000px;
  margin:0px auto;
  background:red;
}
</style> 
<script type="text/javascript"> 
window.onload=function(){ 
  var zhezhao=document.getElementById("zhezhao"); 
  var login=document.getElementById("login"); 
  var bt=document.getElementById("bt"); 
  var btclose=document.getElementById("btclose"); 
   
  bt.onclick=function(){ 
    zhezhao.style.display="block"; 
    login.style.display="block";
    document.body.style.height="100%";
    document.body.style.overflow="hidden";
  } 
  btclose.onclick=function(){ 
    zhezhao.style.display="none"; 
    login.style.display="none";  
    document.body.style.height="";
    document.body.style.overflow="";
  } 
} 
</script> 
</head> 
<body> 
  <div class="zhezhao" id="zhezhao"></div> 
  <div class="login" id="login"><input type="button" id="btclose" value="點擊關閉"/></div>  
  <div class="content">螞蟻部落歡迎您，<input type="button" value="查看效果" id="bt"/></div> 
  <div id="middle"></div>
</body> 
</html>

在上面的代碼中，當點擊按鈕彈出遮罩層的時候設置body的高度為100%，設置值為100%可以使body的高度和瀏覽器客戶區的高度相同，然後設置overflow屬性值為hidden，這樣的話超出的部分就會被隱藏，於是彈出遮罩層的話，也就不會出現滾動條了，點擊關閉遮罩層的時候，再將一切恢複原狀。需要特別註意的是css中添加瞭如下代碼:

html{height:100%}

具體相關內容可以參閱設置html,body高度100%的作用一章節。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=14507

更多內容可以參閱:http://www.softwhy.com/divcss/

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

在Sublime Text 2工具下編輯laravel框架

介紹Sublime編輯器 Sublime Text 3官方版是Sublime Text2的升級版。Sublime Text是一款流行的文本編輯器軟體，有點類似於TextMate，跨平臺，可運行在Linux，Windows和Mac OS X。也是許多程式員喜歡使用的一款文本編輯器軟體。 Sublime...
HTA全解析：給VBS和JS一個強大的交互界面

用HTML界面來強化VBS和JS本地腳本的交互能力與友好性！！！
第八章 ArrayBlockingQueue源碼解析

註意：在閱讀本文之前或在閱讀的過程中，需要用到ReentrantLock，內容見《第五章 ReentrantLock源碼解析1--獲得非公平鎖與公平鎖lock()》《第六章 ReentrantLock源碼解析2--釋放鎖unlock()》《第七章 ReentrantLock總結》1、對於ArrayB...
pyqt5-為QListWidget添加右鍵菜單

如何在pyqt5下為QListWidget添加右鍵菜單？能百度到的均是pyqt4下的，有些貌似並不好用。在嘗試了很多方法後，下麵貼出可用的方法：from PyQt4 import QtCore, QtGui首先創建右鍵菜單:#創建右鍵菜單def rightMenuShow(self): r...
jQuery表單驗證插件----通過name屬性來關聯欄位來驗證，改變預設的提示信息，將校驗規則寫到 js 代碼中

一、下載依賴包網盤下載：https://yunpan.cn/cryvgGGAQ3DSW 訪問密碼 f224二、添加一個另外一個插件jquery.validate.messages_cn.js。改變預設提示方式。三、jQuery表單驗證插件----通過name屬性來關聯欄位來驗證，將校驗規則寫到 j...
css禁止選中指定文本代碼實例

css禁止選中指定文本代碼實例:在實際編碼中可能有這樣的需求，那就禁止指定的元素可以被選中，下麵就通過代碼實例介紹一下如何實現此效果。代碼如下:螞蟻部落螞蟻部落歡迎您，只有努力奮鬥才會有美好的未來。上面的代碼實現了禁止選中div中元素的效果，不過在當前來說此代碼還是有缺陷的，因為IE9以下的瀏覽器並...
點擊同一按鈕實現div的隱藏與現實切換

點擊同一按鈕實現div的隱藏與現實切換:在很多應用中，都有這樣的功能，點擊同一個按鈕可以實現div的隱藏或者現實，當然操作的並非必須是按鈕或者div，不過原理是一樣的，下麵就通過代碼實例介紹一下如何實現此功能。代碼如下:螞蟻部落以上代碼可以實現我們想要的效果，這裡主要利用了toggle()函數。特別...
倒計時指定時間頁面跳轉代碼實例

倒計時指定時間頁面跳轉代碼實例:很多網頁都有類似的效果，那就是經過指定的時間能夠跳轉到其他頁面，如果再人性化一點話，會帶有倒計時效果，本章節就介紹一下如何實現此效果，代碼實例如下:螞蟻部落以上代碼實現了我們想要的效果，能夠在10秒之後跳轉到指定頁面，下麵介紹一下實現過程。一.實現原理:原理...