使用AJAX的強制回應對話方塊

目錄

ModalPopupExtender 控制項

使用 Esc 鍵關閉彈出框

添加動畫顯示

將資料返回到伺服器

請您登場

對話方塊在 Windows® 中已使用了很長時間，它們確實具有自己的優勢。但是，如果您希望 Web 應用程式擁有對話方塊，它們基本上是彈出框，您知道，大多數使用者都會使用攔截程式禁用彈出框。那麼，如果您需要彈出框將要怎麼辦？

使用 Microsoft® ASP.NET AJAX 時，如果沒有頁面重新載入或新頁面，對話方塊對於顯示上下文相關資訊尤其重要。因此，非常有必要設計這樣一種對話方塊，它與模式彈出框等效，並且讓使用者使用起來十分方便。

ASP.NET 和 AJAX 擴充都不具有對彈出框或 Web 對話方塊的內建支援，但 AJAX 控制項工具包卻具有。AJAX 控制項工具包是 ASP.NET 擴充項控制項的共用源碼庫。它最有用的一個控制項是 ModalPopupExtender 控制項，我在 2008 年 1 月的“領先技術安裝”() 中對其進行了簡要介紹。ModalPopup 擴充程式採用伺服器端 ASP.NET 面板所產生的標記，並在使用者單擊關聯的 HTML 元素時顯示或隱藏此標記。對話方塊一開始是隱藏的，在載入頁面時下載到用戶端上，然後根據需要顯示或隱藏。那麼，模態是如何保證的呢？請看一下圖 1 中的程式碼片段。

Figure1ModalPopupExtender 控制項的詳細資料

// Code excerpted from modalpopupbehavior.js.
// Method initialize()
//
// Download the source code of the AJAX Control Toolkit from
// http://www.codeplex.com/atlascontroltoolkit.
//
// The panel defined as the popup is saved as the foreground element.
this._foregroundElement = this._popupElement;
// A new DIV tag is created as the background element for the panel.
// The panel is invisible and placed at 0,0 coordinates (fixed position).
// In addition, the background element is given a high z-index so that it
// sits above everything else.
this._backgroundElement = document.createElement('div');
this._backgroundElement.id = this.get_id() + '_backgroundElement';
this._backgroundElement.style.display = 'none';
this._backgroundElement.style.position = 'fixed';
this._backgroundElement.style.left = '0px';
this._backgroundElement.style.top = '0px';
this._backgroundElement.style.zIndex = 10000;
// The background element is styled as specified.
if (this._BackgroundCssClass)
{
　　 this._backgroundElement.className = this._BackgroundCssClass;
}
// The background element is appended to the parent of the foreground
// element.
this._foregroundElement.parentNode.appendChild(this._backgroundElement);
// The foreground element is programmatically hidden from view. In
// addition, it is given absolute positioning and an higher z-index than
// the background element.
this._foregroundElement.style.display = 'none';
this._foregroundElement.style.position = 'fixed';
this._foregroundElement.style.zIndex = $common.getCurrentStyle(
this._backgroundElement, 'zIndex', this._backgroundElement.style.zIndex) + 1;
// A click handler is added to the target element of the extender. In
// this case, It is the DOM element whose ID is passed on as the
// TargetControlID property.
this._showHandler = Function.createDelegate(this, this._onShow);
$addHandler(this.get_element(), 'click', this._showHandler);

該代碼顯示用於在用戶端上初始化 ModalPopup 擴充程式的指令碼的摘錄。請注意，ASP.NET AJAX 擴充程式通常包含一個伺服器控制項（擴充程式）和一個以 JavaScript 編寫的用戶端行為類。圖 1 中的代碼源自 ModalPopup 擴充程式的用戶端行為類。如果您從 下載 AJAX 控制項工具包的原始碼，則會在 modalpopupbehavior.js 檔案中發現上述代碼。

如您在圖 1 中所見，對話方塊標記樹的根項目被指定為前台元素並以編程方式從視圖中隱藏。同時，會動態建立一個 DIV 標記並將其指定為後台元素。該標記固定在座標 0,0 處，並具有合適的樣式。還為 DIV 標記提供了一個極高（但任意）的 z 索引，這實際上可確保該標記位於文檔中所有其他元素之上，因為 z 索引屬性設定 HTML 元素的堆棧順序，而且堆棧順序最高的元素始終顯示在堆棧順序較低的元素之上。