How to Create an ASP.NET AJAX ModalPopUp Extender Dynamically

You may need to create a ModalPopUpExtender dynamically. Here's some code on how to do so:

Add the following markup in your page:


<form id="form1" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server">



<asp:Panel ID="Panel1" runat="server">

    <asp:Button ID="Button1" runat="server"

    Text="CreateModal" OnClick="Button1_Click" />


<asp:Panel ID="ModalPanel" runat="server"

    Style="display: none"


    Dynamic ModalPopup!

    <asp:Button ID="btnCancel" runat="server" Text="Close Me" />





Then in the code behind, add the following code. On clicking the Button, we have added code to create another button dynamically which contains functionality to show and hide a ModalPopUp


protected void Button1_Click(object sender, EventArgs e)


    Button btnNew = new Button();

    btnNew.ID = "Button2";

    btnNew.Text = "Click Me to Show PopUp";


    AjaxControlToolkit.ModalPopupExtender modalPop =

        new AjaxControlToolkit.ModalPopupExtender();

    modalPop.ID = "popUp";

    modalPop.PopupControlID = "ModalPanel";

    modalPop.TargetControlID = "Button2";

    modalPop.DropShadow = true;

    modalPop.CancelControlID = "btnCancel";







Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs)

        Dim btnNew As New Button()

        btnNew.ID = "Button2"

        btnNew.Text = "Click Me to Show PopUp"


        Dim modalPop As New AjaxControlToolkit.ModalPopupExtender()

        modalPop.ID = "popUp"

        modalPop.PopupControlID = "ModalPanel"

        modalPop.TargetControlID = "Button2"

        modalPop.DropShadow = True

        modalPop.CancelControlID = "btnCancel"





    End Sub

About The Author

Suprotim Agarwal
Suprotim Agarwal, Developer Technologies MVP (Microsoft Most Valuable Professional) is the founder and contributor for DevCurry, DotNetCurry and SQLServerCurry. He is the Chief Editor of a Developer Magazine called DNC Magazine. He has also authored two Books - 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook.

Follow him on twitter @suprotimagarwal.


Anonymous said...

This code is not wirking man rather it shows error "Control 'popUp' of type 'ModalPopupExtender' must be placed inside a form tag with runat=server.
So how can I assign runat=server to dynamically created modalpopup extender.

Suprotim Agarwal said...

You could alternatively add a PlaceHolder control to the page and then add these controls to it. Most of the times, it solves the issue.

Shail Nautiyal said...

Thanxx Man...!!!

-----Shail Nautiyal

Anonymous said...

Good lord I wish this would work.

I've been scouring the web for how to build a simple popup for hours already.

I just want to display a few database details in a popup display.

This just shows the Click Me To Show Popup button and when I click it, the button disappears.

Never do I get to see a popup.

I'm very disappointed with the sorry state that modern web development is in.

Anonymous said...

The example shown in the article works fine for me atleast. Are you creating the popup dynamically as this article suggests or the popup already exist in your code? If it exists, make sure not to put the panel that is bound on popupcontrol into an updatepanel. Instead put the panel outside of the updatepanel and the updatepanel should be inside this panel. That's a very common mistake developers make.

-- Rick

Anonymous said...

Hello Suprotim Agarwal ,
I used your code its not working. I copied your code and paste in new project but nothing happens. When I click the button "Click Me to Show PopUp" this button disappers and nothing happens. Please tell me any solution .

Anonymous said...

I copied this code to a new website project and it works fine. OK, now, I want to use the same modalPop = ...
to open another panel with a textbox in it. That works. But when I click a button to execute the following code:
TextBox tb = (TextBox)this.Panel1.FindControl("TextBox1");
tb.Text = "testing the textbox '\r\n' hello";

the textbox disappears. It is getting filled with the new text, however.