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