快捷導(dǎo)航

JS+CSS實(shí)現(xiàn)彈出全屏灰黑色透明遮罩效果的方法

更新時(shí)間：2014年12月20日 11:39:36 投稿：shichen2014

這篇文章主要介紹了JS+CSS實(shí)現(xiàn)彈出全屏灰黑色透明遮罩效果的方法,詳細(xì)分析了彈出遮罩層效果的實(shí)現(xiàn)方法以及完整的實(shí)例代碼,需要的朋友可以參考下

本文實(shí)例講述了js+CSS實(shí)現(xiàn)彈出一個(gè)全屏灰黑色透明遮罩效果的方法。分享給大家供大家參考。具體分析如下：

在眾多的網(wǎng)站都有這樣的效果，當(dāng)進(jìn)行一定的操作之后，會(huì)彈出一個(gè)灰黑色的半透明的遮罩，在上面可以操作指定的內(nèi)容，例如可以彈出一個(gè)登陸框之類(lèi)的內(nèi)容，下面就介紹一下如何實(shí)現(xiàn)此種效果，代碼實(shí)例如下:

復(fù)制代碼代碼如下:

<!DOCTYPE html>    

<html>    

<head>    

<meta charset=" utf-8">    

<meta name="author" content="http://www.fzitv.net/" />  

<title>CSS如何實(shí)現(xiàn)彈出一個(gè)全屏灰黑色透明遮罩效果-腳本之家</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">點(diǎn)擊關(guān)閉</button></div>  

  <div class="content">腳本之家歡迎您，<button id="bt">點(diǎn)擊彈出遮罩</button></div> 

</body> 

</html>

以上實(shí)現(xiàn)了基本的遮罩功能，當(dāng)點(diǎn)擊彈出遮罩，會(huì)彈出一個(gè)對(duì)象，當(dāng)點(diǎn)擊關(guān)閉，遮罩效果消失。下面介紹一下如何實(shí)現(xiàn)次效果:

實(shí)現(xiàn)原理:

創(chuàng)建一個(gè)滿(mǎn)屏的div，使用絕對(duì)定位，這樣的話(huà)它就可以脫離文檔流，對(duì)其他的元素不會(huì)產(chǎn)生影響，并且將其設(shè)置為半透明狀態(tài)，當(dāng)然這個(gè)透明度可以隨便調(diào)的，同時(shí)創(chuàng)建一個(gè)login元素，它也使用絕對(duì)定位，并將其z-index屬性值大于面屏的div，這個(gè)時(shí)候它就不會(huì)被滿(mǎn)屏div遮蓋。在默認(rèn)狀態(tài)下這兩個(gè)div的display屬性值是none。當(dāng)點(diǎn)擊相應(yīng)的按鈕可以更改他們的display屬性值。

建議:盡可能的手寫(xiě)代碼，可以有效的提高學(xué)習(xí)效率和深度。

希望本文所述對(duì)大家的web程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: