Lightbox me 浮動視窗

在設計網站的時候，是否有想過要把網頁上的某一個 DOM 元素變成一個浮動式的視窗呈現，但又不希望太過花俏。Lightbox me 是一個 jQuery 框架所製成的一個套件，能夠把一個網頁上的 DOM 元素變成一個浮動式的小視窗，當瀏覽器變化時視窗的位置會自動調整。能夠很好的處裡大部分瀏覽器邊界的問題，如視窗調整或視窗比對話框小等等的。

使用方法：
第一步 載入 Lightbox me 所需要用到的 JavaScript 檔
<!-- 使用 Google AJAX API 取得 jQuery 框架 1.8.2 min 版本 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- 載入 Lightbox me 的主程式碼 -->
<script src="jquery.lightbox_me.js"></script>

第二步 建立一個啟動的連結元素和隱藏的表單元素
<a href="#" id="try-1" class="try sprited">Try it!</a>
<div id="sign_up">
    <h3 id="see_id" class="sprited" >Can I see some ID?</h3>
    <span>Please sign in using the form below</span>
    <div id="sign_up_form">
        <label><strong>Username:</strong> <input class="sprited"/></label>
        <label><strong>Password:</strong> <input class="sprited"/></label>
        <div id="actions">
<a class="close form_button sprited" id="cancel" href="#">Cancel</a>
<a class="form_button sprited" id="log_in" href="#">Sign in</a>
        </div>
    </div>
    <h3 id="left_out" class="sprited">Feeling left out?</h3>
    <span>Don't be sad, just <a href="#">click here</a> to sign up!</span>
    <a id="close_x" class="close sprited" href="#">close</a>
</div>

第三步 建立 這兩個元素的 CSS 樣式表
* {
margin: 0;
padding: 0;
font-size: 1em;
text-decoration: none;
border: none;
list-style: none;
outline: none;
}
body {
background: #eef2f7;
font: 13px/20px "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #536376;
}
a {
color: #067dd7;
}
a:hover {
text-decoration: underline;
}
#sign_up {
-moz-border-radius: 6px;
background: #eef2f7;
-webkit-border-radius: 6px;
border: 1px solid #536376;
-webkit-box-shadow: rgba(0,0,0,.6) 0px 2px 12px;
-moz-box-shadow:rgba(0,0,0,.6) 0px 2px 12px;;
padding: 14px 22px;
width: 400px;
position: relative;
display: none;
}
#sign_up #sign_up_form {
margin-top: 13px;
}
#sign_up label {
display: block;
margin-bottom: 10px;
color: #536376;
font-size: .9em;
}

#sign_up label input {
display: block;
width: 393px;
height: 31px;
background-position: -201px 0;
padding: 2px 8px;
font-size: 1.2em;
line-height: 31px;
}
#see_id {
width: 228px;
height: 23px;
background-position: -202px -133px;
}
#left_out {
background-position: -202px -158px;
width: 113px; height: 16px;
}
#sign_up_form {
position: relative;
background: url(divider.png) repeat-x bottom left;
padding-bottom: 54px;
margin-bottom: 12px;
}
#actions {
float: left;
position: absolute;
right: 0;
height: 31px;
bottom: 20px;
}
a.form_button {
float: left;
width: 93px; height: 31px;
margin-right: 15px;
}
#cancel { background-position: -198px -36px; }
#log_in { background-position: -291px -36px; }
#cancel:hover { background-position: -198px -67px; }
#cancel:active { background-position: -198px -98px; }
#log_in:hover { background-position: -291px -67px; }
#log_in:active { background-position: -291px -98px; }
#close_x {
width: 24px; height: 23px;
overflow: hidden; line-height: 1000px;
display: block;
position: absolute; top: 5px; right: 5px;
background-position: -387px -102px;
}
#usage { background-position: -323px -172px; width: 67px; height: 22px;}

第四步 建立啟動的 JavaScript 程式片段
$(function(){
  $('#try-1').click(function(e) {
    $('#sign_up').lightbox_me({
        centered: true,
        onLoad: function() {
            $('#sign_up').find('input:first').focus()
            }
        });
    e.preventDefault();
  });
});

附上 Lightbox me 可修改參數參考

參數	預設	說明
appearEffect	"fadeIn"	進場的方式
appearEase	""	進場的動畫
overlaySpeed	300	背景進場的速度可設定為 slow,normal,fast或為數字單位毫秒
lightboxSpeed	"fast"	對話框進場的速度可設定為 slow,normal,fast或為數字單位毫秒
closeSelector	".close"	關閉的按鈕 CSS 樣式
closeClick	true	按下背景即關閉
closeEsc	true	按下 Esc 即關閉
destroyOnClose	false	關閉即摧毀物件
showOverlay	true	是否顯示半透明背景
onLoad	function() {}	讀取時呼叫
onClose	function() {}	關閉時呼叫
classPrefix	'lb'	前綴的CSS類別
zIndex	999	圖層
centered	false	是否垂直置中顯示
modalCSS	{top:'40px'}	位置圖層的 CSS
overlayCSS	{background:'black',opacity:.6}	背景圖層的 CSS

作者網站：http://buckwilson.me/lightboxme/
檔案大小：4.54 KB 
檔案下載：http://github.com/buckwilson/Lightbox_me/zipball/master
檔案備份：下載