人人人妻人人人妻人人人,99精品国产综合久久久久五月天 ,欧美白人最猛性XXXXX,日韩AV无码免费播放


News新聞

業(yè)界新聞動態(tài)、技術(shù)前沿
Who are we?

您的位置：首頁      JS/JQ/AJAX      彈出窗口并且此窗口帶有半透明的遮罩層效果

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

標簽： 發(fā)布日期：2014-03-14 00:00:00 1200

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

復制代碼代碼如下:

<!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)原理: 
在默認狀態(tài)下，遮罩層和窗口都是隱藏不可見的，當點擊鏈接之后，能夠使窗口和遮罩層顯示，并且將遮罩層設(shè)置為半透明狀態(tài)。此兩個元素都采用絕對定位同時設(shè)置居中窗口的z-index屬性值大于遮罩層，這樣就可以使其覆蓋在遮罩層之上。當點擊關(guān)閉按鈕的時候，能夠?qū)⒄谡謱雍痛翱陔[藏，原理大致如此。