快捷導(dǎo)航

彈出窗口并且此窗口帶有半透明的遮罩層效果

更新時間：2014年03月13日 17:59:27 作者：

這篇文章主要介紹了如何點擊一個按鈕實現(xiàn)彈出一個居中窗口，并且此窗口帶有半透明的遮罩層效果,需要的朋友可以參考下

本章節(jié)介紹一下如何點擊一個按鈕實現(xiàn)彈出一個居中窗口，并且此窗口帶有半透明的遮罩層效果，此效果在當(dāng)下比較流行，當(dāng)然還有更為復(fù)雜的實現(xiàn)方式，當(dāng)然效果也更為絢麗，下面介紹的代碼能夠簡單實現(xiàn)此小姑。
代碼如下:

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

 
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css"> 
#fade { 
display:none; 
position:absolute; 
top:0%; 
left:0%; 
width:100%; 
height:100%; 
background-color:black; 
z-index:1001; 
-moz-opacity:0.8; 
opacity:.80; 
filter:alpha(opacity=80); 
} 
#light{ 
display:none; 
position:absolute; 
top:25%; 
left:25%; 
width:50%; 
height:50%; 
padding:16px; 
border:3px solid orange; 
background-color:white; 
z-index:1002; 
overflow:auto; 
} 
</style> 
<script type="text/javascript"> 
window.onload=function(){ 
var linkbt=document.getElementById("linkbt"); 
var light=document.getElementById('light'); 
var fade=document.getElementById('fade'); 
var closebt=document.getElementById("closebt"); 
linkbt.onclick=function(){ 
light.style.display='block'; 
fade.style.display='block'; 
} 
closebt.onclick=function(){ 
light.style.display='none'; 
fade.style.display='none'; 
} 
} 
</script> 
</head> 
<body> 
<a href="javascript:void(0)" id="linkbt"> 點擊這里打開窗口</a> 
<div id="light"><a href="javascript:void(0)" id="closebt">關(guān)閉窗口</a></div> 
<div id="fade""></div> 
</body> 
</html> 

以上代碼實現(xiàn)了我們的要求，下面簡單介紹一下它的實現(xiàn)過程。
一.實現(xiàn)原理:
在默認(rèn)狀態(tài)下，遮罩層和窗口都是隱藏不可見的，當(dāng)點擊鏈接之后，能夠使窗口和遮罩層顯示，并且將遮罩層設(shè)置為半透明狀態(tài)。此兩個元素都采用絕對定位同時設(shè)置居中窗口的z-index屬性值大于遮罩層，這樣就可以使其覆蓋在遮罩層之上。當(dāng)點擊關(guān)閉按鈕的時候，能夠?qū)⒄谡謱雍痛翱陔[藏，原理大致如此。

您可能感興趣的文章: