Ajax control toolkit modal popup example with demo in asp .net

In this asp .net tutorial we will learn about how to create ajax control toolkit modalpopup extender. Ajax control toolkit modalpopup extender is used to create beautiful popup's inside asp .net websites with little efforts. Ajax control toolkit modalpopup can be used from server side or client side.

1. Install Ajax control toolkit.

First of all you need to install ajax control toolkit into your website or visual studio. If you are unfamiliar about how to integrate ajax control toolkit into your visual studio or website you can read 3 Different ways to add AjaxControlToolkit in Asp .Net Website.

2. Register Ajax control toolkit.

Best way to Register Ajax control toolkit into asp .net website is using web.config. By using this method Ajax control toolkit is available for all available pages.

3. Ajax control toolkit Modalpopup source.

    

    <%--Modalpopup extender code--%>
    
    

    <%--Button to open modal popup--%>
    

    <%--Panel to be displayed as popup--%>
    
        
Hi This is Modal Popup Example
        <%--Button to close modal popup--%>
        
    
    

4. CSS For Ajax control toolkit modal popup exntender

    .modalBackground {
    background-color: Gray;
    filter: alpha(opacity=70);
    opacity: 0.7;
}

    .modalPopup {
    background-color: #ffffdd;
    border-width: 3px;
    border-style: solid;
    border-color: Gray;
    padding: 3px;
    width: 250px;
}
    

5. Some important properties of Ajax control toolkit modal popup exntender

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

Ajax control toolkit modal popup demo