jQuery 精簡版彈出對話方塊層

原文地址: http://wange.im/jquery-dialog-layer.html

彈出對話方塊在一個網站中是相對比較常見的功能，無論是確認資訊還是註冊申請，都可能會用到彈出層。用 JS 來實現這樣的彈出對話方塊效果是再合適不過的了，就 jQuery 而言，就有很多高手們開發好的彈出層外掛程式，甚至連 jQuery 官方也有提供 Dialog UI 組件。

之前寫過一些彈出層的效果，也都是藉助於別人開發好的 jQuery 外掛程式，這些外掛程式的優點是參數多、功能全、方便調用，但是不可避免地會導致外掛程式指令碼過於龐大，很多功能基本用不到，感謝任平生童鞋一語驚醒夢中人，其實彈出的對話方塊層用 jQuery 來實現是相當簡單的，簡單到只需要兩句 JS，一句是彈出，另一句就是關閉。省去了很多不必要的冗餘的功能和 JS 代碼。

先來看一下 DEMO，再來看一下代碼有多簡單：

1、首先是 HTML 部分：

<input type="submit" id="layerBtn" value="點我點我快點我！！！" /><!-- S 彈出層 --><div id="layer">    <p>我彈出來了~</p>    <p>我彈出來了~</p>    <p>我彈出來了~</p>    <p>我彈出來了~</p>    <p>我彈出來了~</p>    <p>我彈出來了~</p>    <p>我彈出來了~</p>    <p>我彈出來了~</p>    <a href="javascript:void(0)" title="關閉" id="close">X</a></div><!-- E 彈出層 -->

2、然後是 CSS 部分：

#layer{    width:600px;    height:300px;    background:#ccc;    border:1px solid #aaa;    position:fixed;    _position:absolute;    /* 勉強應付 IE6 */    top:50%;    right:50%;    margin:-150px -300px 0 0;    display:none;    /* 預設不顯示 */}#close{    position:absolute;    top:0;    right:0;    font:20px/1 Arial;    text-decoration:none;}

因為我們一般要求彈出層相對於瀏覽器視窗垂直水平置中，而且可以跟隨捲軸下拉而下移，所以我這裡用了 position:fixed; 但是 IE6 總是比較杯具，偏偏不支援這麼一個 CSS，無奈我用了 position:absolute; 來對付 IE6，不過這也只能勉強解決這一 bug，因為 position:absolute 只能把彈出層固定在第一屏的垂直置中位置，而無法隨捲軸下移，具體如何解決 fixed 這個 IE6 的 bug 在這裡就不多費口舌了。

3、JS 部分，當然必需先載入 jQuery：

$(document).ready(function(){    $('#layerBtn').click(function(){$('#layer').fadeIn();});    //彈出層    $('#close').click(function(){$('#layer').fadeOut();});    //關閉層});

好了，就是這樣，算是一個超精簡的彈出層效果吧，其中去掉了拖動效果和定時關閉等我認為不需要的代碼，因為我需要的網站上只有一個彈出對話方塊，也沒有考慮擴充性什麼的，能省則省吧，管用就行，希望也能對你有用。