Ajax contorl toolkit ModalPopup Demonstration

ModalPopup Demonstration

ASP.NET AJAX is a free framework for building a new generation of richer, more interactive, highly personalized cross-browser web applications. This new web development technology from Microsoft integrates cross-browser client script libraries with the ASP.NET 2.0 server-based development framework. In addition, ASP.NET AJAX offers you the same type of development platform for client-based web pages that ASP.NET offers for server-based pages. And because ASP.NET AJAX is an extension of ASP.NET, it is fully integrated with server-based services. ASP.NET AJAX makes it possible to easily take advantage of AJAX techniques on the web and enables you to create ASP.NET pages with a rich, responsive UI and server communication. However, AJAX isn't just for ASP.NET. You can take advantage of the rich client framework to easily build client-centric web applications that integrate with any backend data provider and run on most modern browsers.

Click here to change the paragraph style

This ModalPopup will be spawned programmatically. The ModalPopupExtender that this popup is attached to has a hidden TargetControl. The popup can be shown via server in code behind and on the client in script by calling the ModalPopupExtender methods to show and hide.

The ModalPopup supports 4 animation events that allow you to spice up its showing and hiding with visual effects. Open an animated modal popup

ModalPopup Description

The ModalPopup extender allows a page to display content to the user in a "modal" manner which prevents the user from interacting with the rest of the page. The modal content can be any hierarchy of controls and is displayed above a background that can have a custom style applied to it.

When displayed, only the modal content can be interacted with; clicking on the rest of the page does nothing. When the user is done interacting with the modal content, a click of an OK/Cancel control dismisses the modal content and optionally runs custom script. The custom script will typically be used to apply whatever changes were made while the modal mode was active. If a postback is required, simply allow the OK/Cancel control to postback and the page to re-render. You can also absolutely position a modal popup by setting the X and Y properties. By default it is centered on the page, however if just X or Y is specified then it is centered vertically or horizontally.

You can provide OnShowing/OnShown/OnHiding/OnHidden animations which are played when the modal content is shown and hidden. For example, you can use these animations to fade-in and fade-out modal content.

ModalPopup Properties

The control above is initialized with this code. The display on the modal popup element is set to none to avoid a flicker on render. The italic properties are optional:

<ajaxToolkit:ModalPopupExtender ID="MPE" runat="server"
    TargetControlID="LinkButton1"
    PopupControlID="Panel1"
    BackgroundCssClass="modalBackground" 
    DropShadow="true" 
    OkControlID="OkButton" 
    OnOkScript="onOk()"
    CancelControlID="CancelButton" 
    PopupDragHandleControlID="Panel3" >
        <Animations>
            <OnShowing> ..  </OnShowing>
            <OnShown>   ..  </OnShown>    
            <OnHiding>  ..  </OnHiding>            
            <OnHidden>  ..  </OnHidden>            
        </Animations>
    </ajaxToolkit:ModalPopupExtender>

TargetControlID - The ID of the element that activates the modal popup
PopupControlID - The ID of the element to display as a modal popup
BackgroundCssClass - The CSS class to apply to the background when the modal popup is displayed
DropShadow - True to automatically add a drop-shadow to the modal popup
OkControlID - The ID of the element that dismisses the modal popup
OnOkScript - Script to run when the modal popup is dismissed with the OkControlID
CancelControlID - The ID of the element that cancels the modal popup
OnCancelScript - Script to run when the modal popup is dismissed with the CancelControlID
PopupDragHandleControlID - The ID of the embedded element that contains the popup header/title which will be used as a drag handle
X - The X coordinate of the top/left corner of the modal popup (the popup will be centered horizontally if not specified)
Y - The Y coordinate of the top/left corner of the modal popup (the popup will be centered vertically if not specified)
RepositionMode - The setting that determines if the popup needs to be repositioned when the window is resized or scrolled.

Ajax control toolkit ModalPopup example with demo in asp .net

In this asp .net tuotiral you will learn about ajax control toolkit modal popup,ajax control toolkit modal popup updatepanel,ajax control toolkit modal popup css,ajax control toolkit modal popup sample,ajax control toolkit modal popup background css,ajax control toolkit modal popup animation,ajax control toolkit modal popup extender,ajax control toolkit modal popup onload,ajax control toolkit modal popup not working,ajax control toolkit modal popup demo,ajax control toolkit modal popup javascript,ajax control toolkit modal popup iframe,ajax control toolkit modal popup hide,ajax control toolkit modal popup gridview,ajax control toolkit modal popup validation,ajax control toolkit modal popup postback,ajax control toolkit modal popup flicker,ajax control toolkit modal popup tutorial,ajax control toolkit modal popup not modal,using ajax control toolkit modal popup,ajax control toolkit modalpopupextender javascript,ajax control toolkit modal popup code behind,ajax control toolkit modal popup extender not working,ajax control toolkit modalpopupextender targetcontrolid,ajax control toolkit modal popup from code behind,asp.net ajax control toolkit modal popup extender,how to use ajax control toolkit modal popup,ajax control toolkit modal popup video,modal popup in ajax control toolkit,ajax control toolkit modal popup style,ajax control toolkit modal popup position,ajax control toolkit modal popup client side