In this article I will explain with an example, how to open (show) 
AJAX ModalPopupExtender Modal Popup from Code-Behind (Server-Side) in ASP.Net using C# and VB.Net.
 
 
 
Installing and Registering AjaxControlToolkit package using Nuget
 
 
HTML Markup
The HTML Markup consists of following controls:
ScriptManager – For enabling ASP.Net 
AJAX.
 
LinkButton – For triggering the Modal popup to open.
ModalPopupExtender – For displaying Modal popup.
The 
AJAX ModalPopupExtender has been assigned with following properties:
 
TargetControlID – The control where the Text will displayed.
PopupButtonID – The control which opens the Calendar.
CancelControlID – The control which closes the Calendar.
 
Panel – For displaying content of the Modal popup.
Button – For hiding the Modal popup dialog box.
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:LinkButton ID="lnkDummy" runat="server"></asp:LinkButton> 
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" PopupControlID="pnlPopup" TargetControlID="lnkDummy" BackgroundCssClass="modalBackground" CancelControlID="btnHide">
</ajaxToolkit:ModalPopupExtender>
<asp:Panel ID="pnlPopup" runat="server" CssClass="modalPopup" Style="display:none"> 
    <div class="header">Modal Popup</div>
    <div class="body">This is a ModalPopup.<br />
        <asp:Button ID="btnHide" runat="server" Text="Hide Modal Popup" /> 
    </div>
</asp:Panel>
 
 
 
Opening AJAX ModalPopupExtender Modal Popup from Code-Behind (Server-Side) in ASP.Net
Inside the Page_Load event handler, the 
AJAX ModalPopupExtender Modal Popup is opened (shown) using Show method.
 
C#
protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        ModalPopupExtender1.Show();
    }
}
 
 
VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        ModalPopupExtender1.Show()
    End If
End Sub
 
 
 
Modal Popup CSS
The following CSS is used for styling the ASP.Net 
AJAX ModalPopupExtender.
 
	
		<style type="text/css">
	
		    body { font-family: Arial; font-size: 10pt; }
	
		    .modalBackground { background-color: Black; filter: alpha(opacity=60); opacity: 0.6; }
	
		    .modalPopup { background-color: #FFFFFF; width: 300px; border: 3px solid #0DA9D0; padding: 0; }
	
		    .modalPopup .header { background-color: #2FBDF1; height: 30px; color: White; line-height: 30px; text-align: center; font-weight: bold; }
	
		    .modalPopup .body { min-height: 50px; line-height: 30px; text-align: center; font-weight: bold; margin-bottom: 5px; }
	
		</style>
 
 
 
Screenshot
 
 
Demo
 
 
Downloads