jQuery實現帶遮罩層的消息框滑入滑出效果

首先，使用一個遮罩層來遮住整個頁面，在遮罩層上顯示一個消息框，消息框還能夠被關閉，最後使用jQuery使得消息框從頁面頂部滑下，實現的效果以下：

遮罩層的樣式以下：

.overlay{ background:transparent url(images/overlay.png) repeat top left; position:fixed; top:0px; bottom:0px; left:0px; right:0px; z-index:100; }

樣式說明了不論在哪一種瀏覽器中，遮罩層上、右、下左邊距都爲0，保證了真正的遮罩。而position:fixed保存了當出現滾動條時，遮罩的徹底，position:absolute不能知足這個要求，有興趣的能夠試試。過多的不解釋了，不理解的也能夠看看CSS遮罩層這篇文章。

下邊樣式用來顯示消息框：

.box{ position:fixed; top:-200px; left:30%; right:30%; background-color:#fff; color:#7F7F7F; padding:20px; border:2px solid #ccc; -moz-border-radius: 20px; -webkit-border-radius:20px; -khtml-border-radius:20px; -moz-box-shadow:  1px 5px #333; -webkit-box-shadow:  1px 5px #333; z-index:101; }

可見，重要的就是z-index:101，用來確保它在遮罩層之上，和CSS遮罩層那篇文章中提到的同樣。關閉標籤及其餘元素的樣式在這裏就不一一介紹了，你們能夠直接在Demo中查看到，你能夠使用火狐的Firebug或Google瀏覽器中的開發者工具進行樣式的在線查看。下邊是實現動畫效果的jQuery代碼：

$(document).ready(function () { $('#activator').click(function () { $('#overlay').fadeIn('fast', function () { $('#box').animate({ 'top': '150px' }, 500); }); }); $('#boxclose').click(function () { $('#box').animate({ 'top': '-500px' }, 500, function () { $('#overlay').fadeOut('fast'); }); }); });

這裏boxclose關閉事件的動畫完成時，將遮罩層也快速的關閉。