Click here to Skip to main content
15,440,300 members
Articles / Web Development / ASP.NET
Posted 16 Mar 2012


9 bookmarked

A Postback Modal jQuery Popup Message

Rate me:
Please Sign up or sign in to vote.
5.00/5 (6 votes)
16 Mar 2012CPOL2 min read
This tip explains how to display a jQuery modal pop-up message using server side events.
Sample Image


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.


You will need a good understanding of jQuery, JavaScript, and C#.

Using the Code

It is really easy to use the control. Just reference the control on your page. Make sure you register the OnOkClicked event.

uc1:PopMessageControl OnOkClicked="PopMessageControl1_OK" 
ID="PopMessageControl1" runat="server" />

Set up your modal pop-up control's properties:

// Set up what you want your pop-up modal title and/or message to say.
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;

    //display the modal pop-up message

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.

// Decide what you want to do once the user has clicked on the "OK" button,
// You can either update the contents on the modal pop-up or decide to redirect
// away from this page.
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"));


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By
Web Developer MyMarket
South Africa South Africa
Been developing for about 7 years now. Love solving new and interesting problems. Especially enjoy web GUI projects.

Worked as a web developer for K2 SourceCode. Projects worked on: K2 WorkSpace, BlackPoint, BlackPearl and K2 for SharePoint.

Currently working at BidTravel and helping them out with their Procurement systems.

Living in sunny South Africa.

Comments and Discussions

QuestionHow can i make this work in ASP.Net but using VB Pin
templek29-Dec-12 22:36
Membertemplek29-Dec-12 22:36 
GeneralThank you Pin
Member 88385662-May-12 3:10
MemberMember 88385662-May-12 3:10 
QuestionDialog width is not setting Pin
Joel WZ27-Mar-12 6:16
professionalJoel WZ27-Mar-12 6:16 
AnswerRe: Dialog width is not setting Pin
UberGeoff27-Mar-12 23:32
MemberUberGeoff27-Mar-12 23:32 
GeneralRe: Dialog width is not setting Pin
Joel WZ28-Mar-12 6:58
professionalJoel WZ28-Mar-12 6:58 
GeneralRe: Dialog width is not setting Pin
UberGeoff28-Mar-12 10:42
MemberUberGeoff28-Mar-12 10:42 
QuestionDialog styling Pin
Joel WZ27-Mar-12 3:59
professionalJoel WZ27-Mar-12 3:59 
AnswerRe: Dialog styling Pin
UberGeoff27-Mar-12 4:55
MemberUberGeoff27-Mar-12 4:55 
AnswerRe: Dialog styling Pin
Joel WZ27-Mar-12 6:04
professionalJoel WZ27-Mar-12 6:04 
AnswerHow about ajax? Pin
Neetflash19-Mar-12 6:09
MemberNeetflash19-Mar-12 6:09 
GeneralRe: How about ajax? Pin
UberGeoff19-Mar-12 21:43
MemberUberGeoff19-Mar-12 21:43 
GeneralRe: How about ajax? Pin
UberGeoff26-Mar-12 5:28
MemberUberGeoff26-Mar-12 5:28 
GeneralGood job Pin
trbznl17-Mar-12 0:49
Membertrbznl17-Mar-12 0:49 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.