MSDN Magazine Launch Issue - February 15, 2008 - (Page 19) Modal Dialog Boxes with AJAX DINO ESPOSITO ialog boxes have been around in Windows® for a long time, and they do have their advantages. But if you want your Web application to have dialog boxes, you’re basically stuck with popups, and, as you know, most users disable them with popup blockers. So what are you to do if you need a popup dialog? With Microsoft® ASP.NET AJAX, dialog boxes are especially important for displaying context-sensitive information without a page reload or new page. It is therefore important to devise a different implementation of dialog boxes that are as effective as modal popups but hassle-free for users. Neither ASP.NET nor AJAX extensions have built-in support for popups or Web dialog boxes; however, the AJAX Control Toolkit does. The AJAX Control Toolkit is a shared-source library of ASP.NET extender controls. One of its most useful controls is the ModalPopupExtender control that I briefly introduced in the January 2008 installment of Cutting Edge (msdn.microsoft.com/msdnmag/ issues/08/01/CuttingEdge). The ModalPopup extender takes the markup generated by a server-side ASP.NET panel and shows or hides it as the user clicks on an associated HTML element. Initially styled as hidden, the dialog box is downloaded onto the client when the page is loaded and then shown or hidden on demand. How is modality guaranteed? Take a look at the code snippet in Figure 1. The code shows an excerpt from the script used to initialize the ModalPopup extender on the client. Note that an ASP.NET AJAX extender usually comprises a server control—the extender—and a client behavior class written in JavaScript. The code in Figure 1 comes from the ModalPopup extender’s client behavior class. If you download the source code for the AJAX Control Toolkit from codeplex.com/atlascontroltoolkit, you’ll find the aforementioned script code in the modalpopupbehavior.js file. As you can see in Figure 1, the root element of the dialog’s markup tree is designated as the foreground element and programmatically hidden from view. At the same time, a DIV tag is dynamically created and designated as the background element. The tag is given a fixed position at coordinates 0,0 and styled appropriately. The DIV tag is also given an extremely high (but arbitrary) z-index that virtually ensures it will sit on top of all other elements in the document, since the z-index property sets the stack order of an HTML element, and the element with the greatest stack order is always displayed on top of elements with lower stack order. The DIV is then added to the Document Object Model (DOM) as a child of the foreground element’s parent. Finally, the foreground D element—the dialog box content—is given a z-index just higher than that of the background. The net effect of this intermediate DIV is that a new transparent element is layered over all page elements except the popup panel. A click handler is also dynamically applied to the extender controls target in order to ensure that any user input performed outside the popup panel (on the foreground element) is lost and never reaches the intended target. This is the behavior that ensures modality. The content of the server panel you define in the source ASPX page is popped up as a modal window, just like a classic Windows Figure 1 Details of the ModalPopupExtender Control // // // // // // 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); launch2008 19 http://ASP.NET http://ASP.NET http://ASP.NET http://msdn.microsoft.com/msdnmag/issues/08/01/CuttingEdge http://msdn.microsoft.com/msdnmag/issues/08/01/CuttingEdge http://ASP.NET http://ASP.NET http://www.codeplex.com/atlascontroltoolkit http://www.codeplex.com/atlascontroltoolkit
For optimal viewing of this digital publication, please enable JavaScript and then refresh the page. If you would like to try to load the digital publication without using Flash Player detection, please click here.