教程：jQuery警告/確認/提示彈出對話方塊效果

在本教程中，代碼吾愛將給大家介紹一個基於jQuery的對話方塊外掛程式來類比和替換掉JavaScript中預設的彈出對話方塊，它包括以下幾個類型的對話方塊：警告、確認和帶輸入的提示彈出框。

 

教程目錄
外掛程式概述
使用方法
示範下載
已知問題
使用協議

外掛程式概述

這個jQuery彈出對話方塊外掛程式（或稱彈出DIV外掛程式），主要用於替換JavaScript內建的資訊氣球函數所提供的功能（它們是alert(), confirm()和prompt()三個JS內建函數）。我們知道，這三個預設函數的顯示效果非常生硬，而且我們無法根據自己的需求對其進行美化；很顯然，僅使用它們勢必會對網站的使用者體驗造成很大的影響，從而不符合“互連網潮流”了。說了這麼多，我們可以將這個外掛程式所提供的功能總結如下：

1、可以通過CSS來完整自訂快顯視窗的外觀表現效果，從而讓你程式的介面顯得更加專業和精緻。

2、你可以為每個彈出對話方塊設定不同的標題。

3、在傳統JavaScript模式下，如果我們使用prompt()方法來實現提示效果，你會發現：在IE7瀏覽器下它的外觀相當地難看，而且通常需要重新載入整個網頁頁面內容。此時，我們可以通過本外掛程式完美解決。

本外掛程式完全類比傳統JavaScript模式下彈出對話方塊的外觀形態，而且當你縮放瀏覽器頁面的視窗時，這些視窗可以自動調整其在當前視窗中的相對位置（這一點與很多其他本類外掛程式不同，比如lightbox）。如果你將此功能結合jQuery拖拽外掛程式一起使用，你還會發現，對話方塊可以通過拖拽快顯視窗的標題區一起移動起來。

所有這些功能的實際示範和代碼，大家可以在我們提供的執行個體下載包中看到。

jQuery的版本要求：1.2.6或以上。

使用方法與函數說明

使用方法

使用此外掛程式的方法非常簡單，你僅需將jQuery基庫JS檔案，快顯視窗外掛程式的JS檔案，以及對應的視窗CSS檔案以外鏈的形式引入到你的功能頁面中（HEAD標籤內），比如：

<!--基礎檔案，分別是jQuery基庫和拖拽UI外掛程式-->
<script src="/path/to/jquery.js" type="text/javascript"></script>
<script src="/path/to/jquery.ui.draggable.js" type="text/javascript"></script>
<!-- 對話方塊核心JS檔案和對應的CSS檔案-->
<script src="/path/to/jquery.alerts.js" type="text/javascript"></script>
<link href="/path/to/jquery.alerts.css" rel="stylesheet" type="text/css" media="screen" />

請注意：請確保每個JS檔案相對於功能頁面的路徑正確性，並且，如果你已經在頁面中添加了拖拽外掛程式，那麼請去掉上述代碼中的jquery.ui.draggable.js檔案連結。代碼吾愛推薦大家使用Google AJAX Libraries 來載入jQuery基庫，因為它可以加快網頁的顯示速度。

函數說明

你可以通過三個內建函數來分別使用三種不同形式的對話方塊：警告提示框(jAlert)、確定提示框(jConfirm)和帶輸入的提示框(jPrompt)。如下：

• jAlert(message, [title, callback])
• jConfirm(message, [title, callback])
• jPrompt(message, [value, title, callback])

以上三個函數的參數說明：

• message表示彈出框的本文內容，支援HTML標記。
• title表示彈出框的標題。
• callback表示回呼函數或回調值，回呼函數擷取值的方法請查看示範中的具體執行個體代碼。
• jPrompt中的value參數表示使用者輸入框中的預設值。

與傳統JS彈出框不同的地方是，以上三種彈出框的message參數支援HTML標籤，比如要在彈出框的本文地區建立新的一行，可以在其中添加 \n 或<br />。

示範與下載

請查看三種不同對話方塊的示範效果，還可以選擇下載本站提供的執行個體包：

查看示範Alert Dialogs 下載執行個體Version 1.0

目前，這個快顯視窗外掛程式的版本是1.0。

已知的問題

• 在基於WebKit的瀏覽器中不支援使用鍵盤上的斷行符號/ESC進行快速確定和取消。
• 在Opera瀏覽器下，不支援拖拽效果。
• 由於IE6不支援position: fixed屬性，所以在IE6瀏覽器下查看彈窗效果可能會出現異樣。

使用協議

本軟體基於GNU General Public License協議。

如果你覺得jQuery基庫體積過於龐大，但仍然希望加入使用JavaScript編寫的自訂快顯視窗效果，不妨看看下面幾個輕量級的快顯視窗效果：

JavaScript快顯視窗DIV層效果代碼

JavaScript同時彈出多個DIV視窗層

著作權聲明

原文連結：http://abeautifulsite.net/notebook/87。

中文翻譯：http://www.code52.net/page/JS/js200901_01_342.html

翻譯：代碼吾愛（轉載請註明出處，並鏈回本頁）