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: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: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" />

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

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

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.. :)


Popular posts from this blog

Search data in Gridview on Textbox Key press event using JQuery in Asp.Net- C#

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

Dumps for Microsoft Dynamics CRM MB2-703 Practice Exam Questions Free

How to import CSV files into DataTable in C#

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

go to top image