Building a Custom Confirmation Dialog Box
page 1 of 5
Published: 27 Aug 2007
Abstract
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
Feedback
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 30669/ 324

Introduction

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

Article Feedback

Title:  
Name:  
Url: ( Optional )
Comment:  
Please add 4 and 1 and type the answer here:

User Comments

Title: Thank you   
Name: omar
Date: 11/4/2008 3:08:57 AM
Comment:
Thanks for this
Title: Mr.   
Name: Feroze
Date: 10/3/2007 7:15:09 AM
Comment:
Hello
Title: Control's ID Changed   
Name: Huang
Date: 9/22/2007 12:21:41 AM
Comment:
When running the application,some of the controls' IDs changed, getElementById method runs into error.
Title: Good work   
Name: Joe keer
Date: 9/19/2007 10:58:41 AM
Comment:
Good article.
Title: No problem   
Name: Josh Stodola
Date: 8/30/2007 4:13:20 PM
Comment:
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: 8/29/2007 5:45:56 PM
Comment:
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: 8/29/2007 5:14:26 PM
Comment:
innerText only works in IE. Probably should be using innerHTML instead.

Best regards...
Title: Reg:Custom Message Box   
Name: Shikha
Date: 8/29/2007 11:02:07 AM
Comment:
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: 8/28/2007 4:07:31 PM
Comment:
Download the solution and use the below code to display an alert if the Yes button is clicked for example
btnConfOK.Attributes.Add("onclick","alert('test');");
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: 8/28/2007 3:24:26 PM
Comment:
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 
Learn More
.NET Tools
asp.net shopping cart
asp.net chart control






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


©Copyright 1998-2009 ASPAlliance.com  |  Page Processed at 1/8/2009 7:48:12 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search