How to trigger a modal window in ASP.NET WebForms?

Question

How can I show modal windows in an ASP.NET WebForms application? I need to display a modal window with 2 buttons (OK/Cancel) and retrieve which button is pressed in my code. I'm also using jQuery and Bootstrap for this project, if that affects my options.

Answer 1

Hey check this code using modalpopupextender . But first, you'll need to install AjaxControlToolKit from the Nuget Package Manager and add it as an assembly reference at the top of your .aspx page as a directive, like this:

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

Then here is the code from the modalpopupextender :

     <asp:Button ID="btnOpenPopUp" runat="server" text="Open PopUp" />
     <asp:Label ID="lblHidden" runat="server" Text=""></asp:Label>
        <ajaxToolkit:ModalPopupExtender ID="mpePopUp" runat="server" TargetControlID="lblHidden" PopupControlID="divPopUp" BackgroundCssClass="modalBackground"></ajaxToolkit:ModalPopupExtender>

<div id="divPopUp" class="pnlBackGround">
     <div id="Header" class="header" >MyHeader</div>
     <div id="main" class="main">Main PopUp </div>
     <div id="buttons">
          <div id="DivbtnOK" class="buttonOK"><asp:Button id="btnOk" runat="server" text="Ok" /></div>
          <div id="Divbtncancel" class="buttonOK"><asp:Button id="btnCancel" runat="server" text="Cancel" /></div>
     </div>
</div>

then from Code behind On Click event of the button Open PopUp :

protected void btnOpenPopUp_Click(object sender, ImageClickEventArgs e)
{
    mpePopUp.Show();
}

then on click of Ok Button :

protected void btnOk_Click(object sender, ImageClickEventArgs e) {
    //Do Work

    mpePopUp.Hide(); }

On Cancel click button :

protected void btnCancel_Click(object sender, ImageClickEventArgs e)
{
    //Do Work

    mpePopUp.Hide();
}

Tip: If you don't have the ajax toolkit it can be installed with Nuget.