This tip explains how to display a jQuery modal pop-up message using server side events. The jQuery modal pop-up window is initiated after a server side button postback.
Once the postback is invoked, the modal window will register the client side script to allow the browser to open up the pop-up window. This is useful if you need to do some sort of server
side processing or validation before you want to display the pop-up. It is also useful if you don't want your client side code to handle your modal popup messages.
In the end, I have created a server side control that uses the jQuery toolkit.
UPDATE - 24/02/2014
I have updated this project to make it more useful. I have included an additional "
Panel" control that allows the user to add any ASP control into the custom pop-up control. The user can then code against these controls however he/she feels is appropriate allowing developers the ability to place the page controls within the pop-up modal giving this control a lot more flexibility.
Using the Code
It is really easy to use the control. Just reference the control on your page. Make sure you register the
ID="PopMessageControl1" runat="server" />
Set up your modal pop-up control's properties:
protected void Button1_Click(object sender, EventArgs e)
PopMessageControl1.Title = "This is the title";
PopMessageControl1.ImageUrl = "~/images/User_Male_Information.png";
PopMessageControl1.PopupButtonSet = PopupButtonSet.OkPostback;
When the "OK" button is clicked within the modal pop-up control, the
OnOkClicked event will be invoked. You can decide what to do after the event has fired.
The modal window's content is wrapped inside an AJAX
UpdatePanel - this will prevent the page from "hiding" the modal pop-up on the postback event, i.e., it is up to the programmer to decide what will happen after the "OK" button has been clicked inside of the modal pop-up. It is here where you would normally do some "real" business logic. In my example below, I do a simple integer increment (using
ViewState to remember my increments on each postback) and on the 3rd attempt, I instruct the page to redirect effectively allowing the page to "reset" - thus the modal will no longer be visible.
protected void PopMessageControl1_OK(object sender, PopupMessageArgs e)
if (Counter > 3)
lblMessage.Text = "You clicked the 'OK' button. On the 3rd OK click attempt - this modal will close...";
blItems.Items.Add(new ListItem(Counter + " item", "1"));