overlay的做法

當我們去到某些網站時可以看到他們的提示窗口滿特別的，不再是用alert了，

而是改用一個層，覆蓋后面的物件，簡單來講，去igoogle就知道了。

怎么做到的呢？其實就是用css+javascript，下面就是一些代碼：

這就是最底層，z-index設為9998,覆蓋了以下的物件：

#overlay_window{
height:100%;
width:100%;（覆蓋整個頁面）
background-color:#000;
z-index:9998;
position:absolute;
margin:0px;
top:0px;
left:0px;
display:none;（初始時不顯示）
}

要顯示的內容：

#overlay_contain{
width:750px;（自己設定你要的寬度）
position:absolute; 
z-index:9999;
margin-left:-375px;（居中，要設為auto也可以）
left:50%;
display:none;
}

html：

<div id=overlay_window></div>

<div id=overlay_contain></div>

如何顯示：

在這里我用了jquery的寫法：

$(#button”).click(function()

{

$(“#overlay_window”).fadeTo(‘slow’,0.5,function()

{

       $(“#overlay_window”).fadeIn(‘slow’);

       $(“#overlay_contain”).fadeIn(‘slow’);

})

});

或者原裝javascript(想像出來的，沒經過測試,僅為參考)

document.getElementById(‘button’).onclick=function()

{

var win=document.getElementById(‘overlay_window’);

var contain=document.getElementById(‘overlay_contain’);

win.style.display=’block’;

contain.style.display=’block’;

win.style.opacity=’0.5’;//IE的話不支持，可能要另想辦法

} ;

（本文乃原創文章，轉載請注明出處）