Click here to Skip to main content
13,257,276 members (48,645 online)
Click here to Skip to main content
Add your own
alternative version


44 bookmarked
Posted 17 Apr 2011

Confirm Message Box

Rate this:
Please Sign up or sign in to vote.
A confirm message box that can be drawn with HTML and CSS


As you might know, some actions in any web applications need user confirmation to avoid losing data (you know, a user can press delete by mistake). So, we (the developers) should provide confirmation messages that ask the user to confirm his/her request. Well, this is usually accomplished by adding the attribute:

OnClientClick="return confirm('Are you sure you want to delete this item?');"

But are you not with me, this looks a little stupid. I mean the title 'Message from web page', the icon, the OK/Cancel buttons and the whole message that is drawn by the browser, which can break the design of the whole page, take a look:

confirm messge

But not any more, we can provide a confirm message that uses ModalPopupExtender that can display a div or a panel as a modal dialog. See this:

new confirm messge

For a complete implementation for MessageBox in the web, please check out Message Box Control[^].

Using the Code

Well..., using this confirm message box is so easy. In the Page Load, even you would need to find a reference to the message box, then call its RegisterButtonForConfirmation method, just like:

ConfirmMessageBox ConfirmMessageBox1 = GetConfirmMessageBox1Reference();
IButtonControl deletebutton = GetdeletebuttonReference();
ConfirmMessageBox1.RegisterButtonForConfirmation(deletebutton, text, title);

This method will add some script to onclick event to that button. This script calls the function WebForm_DoPostBackWithOptions if necessary to apply validation and other postback options, and also AcceptDialog() functions which opens the confirmation dialog.

ConfirmMessageBox also provides an AutoPstBack property to perform some actions at server like saving transactions. You can also give the message box the style you want by defining the CSS classes in ConfirmMessageBox.css.

So, Where is the Trick?

The trick is in OpenDialog() and AcceptDialog() functions; first: OpenDialog() returns false to prevent posting back the link button:

OpenDialog: function(text, title, callingbuttonid) {
        $get(this.get_element().id + '_h_callingbuttonid').value = callingbuttonid;
        $get(this.get_element().id + '_lblTitle').innerText = title;
        $get(this.get_element().id + '_lblText').innerText = text;

        $find(this.get_element().id + '_extConfirmMessage').show();
        $get(this.get_element().id + '_cmdYes').focus();

        return false;

And AcceptDialog() refires the postback reference of the link button:

AcceptDialog: function() {
    var callingbuttonid = $get(this.get_element().id + '_h_callingbuttonid').value;
    var callingbutton = $get(callingbuttonid);

    // raise postback event
    // Link buttons.
    if (callingbutton.tagName.toLowerCase() == 'a')
        window.location.href = callingbutton.href;
    // other buttons.
    else if (callingbutton.tagName.toLowerCase() == 'input') {
        var theForm = document.forms['form1'];
        if (!theForm) {
            theForm = document.form1;

        var eventTarget =;
        var eventArgument = '';
        if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
            theForm.__EVENTTARGET.value = eventTarget;
            theForm.__EVENTARGUMENT.value = eventArgument;

    $get(this.get_element().id + '_h_callingbuttonid').value = '';
    $find(this.get_element().id + '_extConfirmMessage').hide();


  • Saturday, April 16, 2011: First version
  • Saturday, April 23, 2011: Handled postback options
  • Monday, June 13, 2011: Added a link to Message Box Control


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


About the Author

Ali Al Omairi(Abu AlHassan)
Software Developer (Senior) The first Ones
Jordan Jordan
-- Life is Good.

You may also be interested in...

Comments and Discussions

GeneralMy vote of 5 Pin
babalao18-Apr-11 4:33
memberbabalao18-Apr-11 4:33 
GeneralRe: My vote of 5 Pin
Ali Al Omairi(Abu AlHassan)18-Apr-11 23:10
memberAli Al Omairi(Abu AlHassan)18-Apr-11 23:10 
GeneralRe: My vote of 5 Pin
Ali Al Omairi(Abu AlHassan)24-Apr-11 20:58
memberAli Al Omairi(Abu AlHassan)24-Apr-11 20:58 

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.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.171114.1 | Last Updated 13 Jun 2011
Article Copyright 2011 by Ali Al Omairi(Abu AlHassan)
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid