dotnetco.de

There are several ways to call a modal popup from asp.net. You could code it on your own using JavaScript, or you could use existing frameworks like jQuery or Ajax Control Toolkit. As I use both of them, I decided to check with the Ajax Control Toolkit as this is already implemented and no further module needs to be referenced.
You could call the modal popup from the UI or from Backend. The current posting is just a reminder for me how to use it in backend.

First, ModalPopup from Ajax Control Toolkit always needs to be initiated by a button click. So even if using from backend we still have to define a button. We set the style to display:none so the user would not see it. Take care: Do not use visible=false as the button would not be created then. Then we define the ModalPopupExtender as usual: Define the name, the target panel and some CSS. The TargetControlID is the invisible button, the PopupControlID is the panel which should be shown as modal popup. In the panel you could setup the modal popup. You could setsome CSS, enter labels, textboxes, buttons etc.
After everything is set up, go to your backup code. To show this popup just call .show on the ModalPopupExtender. So in the example it would be mdlPopupFilterName.Show. As soon as the user clicks on a button the modalpopup is automatically closed so you don’t need to close it manually in your code.

Here are some example files:

ASP.NET

<asp:Button ID="btnShowPopup" runat="server" Style="display: none" />
<ajaxToolkit:ModalPopupExtender ID="mdlPopupFilterName" runat="server" TargetControlID="btnShowPopup" PopupControlID="SelectFiltername" BackgroundCssClass="modalBackground" />
<asp:Panel ID="SelectFiltername" runat="server" CssClass="modalPopup">
  Please enter Filtername:<br />
  <asp:TextBox ID="Filtername" runat="server" CssClass="inputTextbox" /><br />
  <asp:Button ID="SaveFiltername" runat="server" Text="Save Filter" CssClass="buttonOverview" />
  <asp:Button ID="CancelSaveFiltername" runat="server" Text="Cancel" CssClass="buttonOverview" />
</asp:Panel>

Your backend code:

Private Sub SaveFilter_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles SaveFilter.Click
  ' Do some other checks first if you like
  ' ...
  mdlPopupFilterName.Show()
End Sub

Some CSS Classes:

/*Modal Popup*/
.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;
  text-align:center;
  width: 210px;
}
.buttonOverview
{
  padding-left:2px;
  font-size:100%;
}