DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JS+CSS實現彈出全屏灰黑色透明遮罩效果的方法教程
JS+CSS實現彈出全屏灰黑色透明遮罩效果的方法教程
編輯:關於JavaScript     

本文實例講述了js+CSS實現彈出一個全屏灰黑色透明遮罩效果的方法。分享給大家供大家參考。具體分析如下:

在眾多的網站都有這樣的效果,當進行一定的操作之後,會彈出一個灰黑色的半透明的遮罩,在上面可以操作指定的內容,例如可以彈出一個登陸框之類的內容,下面就介紹一下如何實現此種效果,代碼實例如下:
代碼如下:<!DOCTYPE html>   
<html>   
<head>   
<meta charset=" utf-8">   
<meta name="author" content="http://www.cnblogs.com/" /> 
<title>CSS如何實現彈出一個全屏灰黑色透明遮罩效果-博客園</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;
}
.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>
  <div class="zhezhao" id="zhezhao"></div>
  <div class="login" id="login"><button id="btclose">點擊關閉</button></div> 
  <div class="content">博客園歡迎您,<button id="bt">點擊彈出遮罩</button></div>
</body>
</html>

以上實現了基本的遮罩功能,當點擊彈出遮罩,會彈出一個對象,當點擊關閉,遮罩效果消失。下面介紹一下如何實現次效果:

實現原理:

創建一個滿屏的div,使用絕對定位,這樣的話它就可以脫離文檔流,對其他的元素不會產生影響,並且將其設置為半透明狀態,當然這個透明度可以隨便調的,同時創建一個login元素,它也使用絕對定位,並將其z-index屬性值大於面屏的div,這個時候它就不會被滿屏div遮蓋。在默認狀態下這兩個div的display屬性值是none。當點擊相應的按鈕可以更改他們的display屬性值。

建議:盡可能的手寫代碼,可以有效的提高學習效率和深度。

希望本文所述對大家的web程序設計有所幫助。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved