Building a Custom Confirmation Dialog Box
page 1 of 5
Published: 27 Aug 2007
In this article Haissam Abdul Malak will show how you can create your own custom confirmation message to be used instead of the browser's default confirmation dialog and the purpose behind it.
by Haissam Abdul Malak
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 53572/ 34


Who has not used the window.confirm() method to display a confirmation dialog box to the user before continuing the processing on the server side? I actually loved that dialog box when I first started using it; however, two annoying things were pushing me to create my own custom dialog.

·         Default button focus: The default selected button is "OK." Consider that you have a grid control and a delete button on its rows to allow the user to delete a certain row and on the delete button click event you would like to show a confirmation message. It is good practice to show such a dialog box in such operations. However, if the user clicks by mistake the enter keyboard key, the OK button click event is handled.

·         Default Buttons: The two default buttons are OK and Cancel and they cannot be modified.

The benefits for using this custom dialog box are as follows:

·         The need to set a default button to a different control other than the OK button.

·         The need to change the text for the buttons to a value different than the default ones used by the web browser (in this example I have used Yes and No), and finally, the need to change its appearance.

One last thing I should mention is the ability of this dialog box to re-locate itself once the window is resized. In this way the dialog box will always appear in the center of the window.

View Entire Article

User Comments

Title: bn m   
Name: v mvb
Date: 2012-12-18 1:55:07 AM
v v
Title: gdfgdfg   
Name: gdfgdf
Date: 2012-10-22 7:08:34 AM
Title: How to react   
Name: xyz
Date: 2012-09-06 5:40:55 AM
u do not find ny yes no buttons in design..
Title: gbfb   
Name: gfg
Date: 2012-09-03 3:24:59 AM
Title: sdf   
Name: asdf
Date: 2012-07-24 1:06:39 AM
Title: aaaaa   
Name: bbbbbbbbbb
Date: 2012-06-14 12:56:42 AM
Title: sdfa   
Name: asd
Date: 2012-06-08 1:55:35 AM
Title: a   
Name: a
Date: 2012-05-27 4:46:40 PM
Title: 2012 NFL jerseys   
Name: NIKE NFL jerseys
Date: 2012-05-20 11:29:29 PM
[/pre]Cheap NFL,NBA,MLB,NHL
[url=]Jerseys From China[/url]
[url=]2012 nike nfl Jerseys[/url]
[url=]cheap China Jerseys[/url]
[url=]Sports Jerseys China[/url]
[url=]NFL Jerseys China[/url]
[url=]NBA Jerseys China[/url]
NHL Jerseys China
[url=]MLB Jerseys China[/url]NFL jerseys For Sale online.All Our Jerseys Are Sewn On and Directly From Chinese Jerseys Factory
[pre]We Are Professional China jerseys Wholesaler
[url=]Wholesale cheap jerseys[/url]Cheap mlb jerseys
[url=]2012 mlb all atar jerseys[/url]
[url= [/url]Cheap China Wholesael[/url]
[url=]Wholesale jerseys From China[/url]
[url=]2012 nike nfl Jerseys[/url]Free Shipping,Cheap Price,7 Days Deliver
We are professional jerseys manufacturer from china,wholesal
sports [url=]Jerseys From China[/url]
[url=]NFL jerseys China[/url]
[url=]NHL Jerseys China[/url]
[url=]NBA Jerseys China[/url]
[url=]MLB Jerseys China[/url]
[url=]China Jerseys[/url],Free Shipping
We are professional jerseys manufacturer from china,wholesal
sports [url=]cheap jerseys sale online [/url]
[url=]2012 nike nfl Jerseys[/url]
[url=]cheap NFL jerseys China[/url]
[url=]NHL Jerseys C
Title: how can i do return true or false   
Name: james
Date: 2010-02-23 12:02:50 AM
how can i do if the clicked yes button retrun true and if clicked No button retrun false
Title: Mr   
Name: Sakthi
Date: 2010-02-14 7:08:37 AM
Hi this is cool
Title: feed back   
Name: vandan
Date: 2010-01-02 8:22:19 AM
Title: Execute code behind based on button clicks   
Name: Archna
Date: 2009-09-22 2:15:25 PM
I used the code above, customized the getElementByid and successfully executed and got the confirm box.
In my application there is a gridview and a delete button associated with every row, if the user presses the delete button, this dialog pops up, however unlike the javascript confirm dialog that returns true/ false based on which button was clicked (Ok/ Cancel), this one just postsback the page. Is there a way to resolve this?

Any help appreciated.

Title: Good One   
Name: Rudra
Date: 2009-08-27 7:52:24 AM
Nice one. I used it with little customization. on YES?No button we can react with code behind.
Keep us doing good work!
Title: Thanks   
Name: Emily
Date: 2009-06-26 10:36:27 AM
Very useful. Wanted to thank.
Title: Good but...   
Name: Khan
Date: 2009-06-18 3:02:51 AM
Nice job but It could have been better. The functions SetText(),DisplayConfirmMessage() and SetDefaultButton() all could have been incorporated into one function and the Buttons should have returned a value of yes/no to the calling javascript function then it would be easy to validate and do some stuff based on choice! Also this could be attached to the window.confirm event then it would be simple to call...
Title: Wow   
Name: Great article
Date: 2009-05-05 3:58:44 AM
I'll put it to good use!
Title: Amazing   
Name: qwerty
Date: 2009-05-05 3:54:27 AM
Wow! What language did you use here?
Title: how?   
Name: how
Date: 2009-04-01 4:16:56 PM
why all the coding cant work when combined it all together?can you give me a full one.i need it for urgent,please help me.thanks
Title: the title   
Name: the name
Date: 2009-02-13 7:08:42 PM
all good!
Title: just asking   
Name: Rolando
Date: 2009-02-11 9:04:55 PM
Hi amm just asking how to make a comment box using i mean how to manipulate it???
Title: Thank you   
Name: omar
Date: 2008-11-04 3:08:57 AM
Thanks for this
Title: Mr.   
Name: Feroze
Date: 2007-10-03 7:15:09 AM
Title: Control's ID Changed   
Name: Huang
Date: 2007-09-22 12:21:41 AM
When running the application,some of the controls' IDs changed, getElementById method runs into error.
Title: Good work   
Name: Joe keer
Date: 2007-09-19 10:58:41 AM
Good article.
Title: No problem   
Name: Josh Stodola
Date: 2007-08-30 4:13:20 PM
You're welcome. Changing innerText to innerHTML should make this cross-browser. I don't see any other potential problems except for body.offsetWidth and body.offsetHeight. However, even if those properties do not work in other browser's, at least the main purpose of this function will still work fine.

Best regards...
Title: Re: InnerText   
Name: Haissam Abdul Malak
Date: 2007-08-29 5:45:56 PM
Josh thank you for providing this useful information.

Shikha i will try to customize the code to run accross different browsers.

Best Regards,
Title: InnerText   
Name: Josh Stodola
Date: 2007-08-29 5:14:26 PM
innerText only works in IE. Probably should be using innerHTML instead.

Best regards...
Title: Reg:Custom Message Box   
Name: Shikha
Date: 2007-08-29 11:02:07 AM
Ya the control is really good and useful but not working with other browsers, please provide the solution for that also as i need the same for Opera, Netscape, Safari and Mozila browsers.
Title: Re:How to react   
Name: Haissam Abdul Malak
Date: 2007-08-28 4:07:31 PM
Download the solution and use the below code to display an alert if the Yes button is clicked for example
The above code will call a javascript alert to display a message. And if you want to use the server side event, just double click on the "Yes" button on design mode to handle its click event. Hope it is clear now for you and it isnt "Useless" for you
Title: How to react   
Name: unknown
Date: 2007-08-28 3:24:26 PM
This is completely useless, how can you react to which button was pressed?! If they choose yes, I want to do this code-behind. If they choose no, I want to do other code-behind. This dialog does nothing!

Product Spotlight
Product Spotlight 

Community Advice: ASP | SQL | XML | Regular Expressions | Windows

©Copyright 1998-2023  |  Page Processed at 2023-06-06 6:47:05 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search