Building Modal Popup using ASP.Net AJAX ModalPopupExtender Control


In this blog I will explain with an example how to build a Modal Popup ASP.Net AJAX ModalPopupExtender control.

First of all register the AJAX Control Toolkit Library by putting the following line just below the @PageDirective ::

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>

Now add the following code inside the <body> tag ::

<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
        <asp:Button ID="BtnShow" runat="server" Text="Show Modal PopUp" BackColor="Yellow"
            BorderStyle="Groove" />
        <asp:ModalPopupExtender ID="ModalPopupExtender1" PopupControlID="Panel1" TargetControlID="BtnShow" CancelControlID="BtnClose" BackgroundCssClass="BackgroundCss" runat="server">
        </asp:ModalPopupExtender>
        <asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" align="Center" style="display:none">
        Aayush Singh. Aayush Singh. Aayush Singh. Aayush Singh. Aayush Singh. Aayush Singh. Aayush Singh. Aayush Singh. Aayush Singh. Aayush Singh. Aayush Singh. Aayush Singh.     <br /><br />
            <asp:Button ID="BtnClose" runat="server" BackColor="Azure" BorderStyle="Groove" Text="Close" />
        </asp:Panel>
    </div>
    </form>

You will require the below Css code for better user interface so add inside <head> tag ::

<style type="text/css">
    .BackgroundCss
    {
        background-color: Black;
        filter: alpha(opacity=90);
        opacity: 0.8;
    }
    .modalPopup
    {
        background-color: #FFFFFF;
        border-width: 3px;
        border-style: solid;
        border-color: black;
        padding-top: 10px;
        padding-left: 10px;
        width: 300px;
        height: 140px;
    }
</style>

Note :- You may adjust the PopUp window size by adjusting size according to your requirement. Also instead of using button use Image button and place it at appropriate place for better look.. :)

Comments

Popular posts from this blog

How to show enlarge image when mouse hover on image or link in Asp.Net(c#) using JavaScript

StateCode and StatusCode Values for mostly used entities in Microsoft Dynamics CRM 2013

How to add custom filter lookup field based on OptionSet field selection in Dynamics CRM.

go to top image