Modal dialog box with Ajax

Directory

ModalPopupExtender control

Use the ESC key to close the pop-up box

Add animation display

Returning data to the server

Please make your debut.

dialog boxes have been used for a long time in Windows®, and they do have their advantages. However, if you want your WEB application to have dialog boxes, which are basically pop-up boxes, you know that most users disable the pop-up box using an interceptor. So what if you need a pop-up box?

When using Microsoft®asp.net AJAX, dialog boxes are especially important for displaying context-sensitive information if there is no page reload or a new page. Therefore, it is very necessary to design a dialog box that is equivalent to a modal pop-up box and makes it easy for users to use.

asp.net and AJAX extensions do not have built-in support for pop-up boxes or Web dialogs, but the AJAX Control Toolkit has. The AJAX Control Toolkit is a shared Source library for ASP.net extender controls. One of its most useful controls is the ModalPopupExtender control, which I briefly described in the "leading Technology Installation" () in January 2008. The ModalPopup Extender takes the markup generated by the server-side asp.net panel and displays or hides the tag when the user clicks the associated HTML element. The dialog box is hidden at first, loaded onto the client when the page loads, and then displayed or hidden as needed. So, how is modal guaranteed? Take a look at the code snippet in Figure 1.

Figure1modalpopupextender Control Details

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 was given a high z-index so 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 a higher z-index
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's 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);

The code displays an excerpt of the script used to initialize the ModalPopup extender on the client. Note that the ASP.net AJAX extender typically contains a server control (extender) and a client behavior class written in JavaScript. The code in Figure 1 originates from the client behavior class of the ModalPopup extender. If you download the source code from the AJAX Control Toolkit, the above code is found in the Modalpopupbehavior.js file.

As you can see in Figure 1, the root element of the dialog tag tree is specified as the foreground element and is hidden programmatically from the view. At the same time, a DIV tag is dynamically created and designated as a background element. The tag is fixed at coordinates 0, 0, and has the appropriate style. Also provides a very high (but arbitrary) z-index for the DIV tag, which actually ensures that the tag is on top of all other elements in the document, because the Z-indexed property sets the stack order of the HTML elements, and the elements with the highest stack order always appear on top of the lower stack order elements.