uLightBox 簡單輕巧的對話視窗 - 基於 jQuery 框架

在設計網頁的時候，有時候會需要用到回覆視窗來跟使用者溝通。但是有時候會覺得瀏覽器預設的彈出視窗沒有那麼好看，所以有了這一個 uLightBox 套件基於 jQuery框架撰寫。這是一個彈出式的對話視窗，可以以黑幕蓋住其他的網頁部分讓使用者不要有別的動作，讓使用者專注在唯一的一個對話框上知道了解你要請使用者作的指令或提示。

使用方法：
第一步 首先載入 uLightBox 需要用到的 CSS 和 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>
<!-- uLightBox 的主程式碼 -->
<script type="text/javascript" src="js/jquery.ulightbox.js"></script>
<!-- uLightBox 的主程式碼 -->
<link rel="stylesheet" type="text/css" href="css/jquery.ulightbox.css" />


第二步 設計需要用到對話視窗的 HTML
<a id="alert">點我</a>

第三步 寫入 JavaScript 程式碼片段啟動 uLightBox
$(function() {
   uLightBox.init({
      override:true,
      background: 'white',
      centerOnResize: true,
      fade: true
   });

   $('#alert').click(function() {
      alert('Hello');
   });
});

附上 uLightBox 可修改參數

參數	屬性	說明
override	布林	是否可讓提示視窗在於文字當中
background	字串	背景,可設定為 white,black,none
centerOnResize	布林	是否自動調整大小
fade	布林	是否以淡入淡出呈現對話視窗
text	字串	內容文字框所顯示的訊息
width	字串	框度設置可設定為 CSS 單位
title	字串	文字框的標題文字
leftButtons	陣列	左邊按鈕的顯示例..['close']
rightButtons	陣列	右邊按鈕的顯示例..['open','note']
opened	函式	開啟後執行
onClick	函式	當按鈕被點擊時執行

作者網站：http://www.class.pm/
檔案大小：23.6 KB (包含範例)
檔案下載：http://www.class.pm/files/jquery/jquery.ulightbox/jquery.ulightbox-1.0.0.zip
檔案備份：下載