Building a Custom Confirmation Dialog Box
page 2 of 5
by Haissam Abdul Malak
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 48019/ 63


Let us now examine the procedure to create a custom dialog box.

HTML code

This dialog box consists of the below controls.

1. Three div layers

2. Two web server controls (buttons)

Listing 1

<div id="divConfMessage" runat="server" style="BORDER-RIGHT:black thin solid; 
BORDER-TOP:black thin solid; DISPLAY:none; Z-INDEX:200; 
BORDER-LEFT:black thin solid; BORDER-BOTTOM:black thin solid">
  <div style="BACKGROUND-COLOR: #6699cc;TEXT-ALIGN: center" id="confirmText">
  <div style="Z-INDEX: 105;HEIGHT: 2%;BACKGROUND-COLOR: white;TEXT-ALIGN: center">
  <div style="Z-INDEX: 105;BACKGROUND-COLOR: white;TEXT-ALIGN: center">
    <asp:Button ID="btnConfOK" Runat="server" Text="OK"></asp:Button>
    <asp:Button ID="btnConfCancel" Runat="server" Text="Cancel"></asp:Button>

The above listing will create a div layer which will serve as our dialog box. This layer, hidden by default, contains another div layer "confirmText" used to set the message to the user and another div layer containing the two buttons used.

Note that in the style attribute of each div layer we are setting the Z-INDEX property to a value (higher than all the z-index of other controls on the page) to make all the div layers appear on top of all controls.

JavaScript Code

In this section we will create a javascript file containing 4 global variables and 5 functions.

1. Global variables

          a - var divWidth = ''; this variable is used to set the dialog box width.

          b - var divHeight = ''; this variable is used to set the dialog box height.

          c - var txtFirstButton = OK; this variable is used to set the text of the first button.

          d- var txtSecondButton = Cancel; this variable is used to set the text of the second


2. Functions

          a - DisplayConfirmMessage(msg,width,height)

          b- SetTopLeft(divLayer)

          c- SetHeightWidth(divLayer)

          d- SetText(txtButton1,txtButton2)

          f - SetDefaultButton(defaultButton)

Listing 2

function DisplayConfirmMessage(msg, width, height)
  // Set default dialogbox width if null
  if (width == null)
  divWidth = 180
    divWidth = width;
  // Set default dialogBox height if null
  if (height == null)
  divHeight = 90
    divHeight = height;
  // Ge the dialogbox object
  var divLayer = document.getElementById('divConfMessage');
  // Set dialogbox height and width
  // Set dialogbox top and left
  // Show the div layer = 'block';
  // Change the location and reset the width and height if window is resized
  window.onresize = function()
    if ( == 'block')
  // Set the dialogbox display message
  document.getElementById('confirmText').innerText = msg;

The above function takes 3 parameters. The first is the message you want to display for the user, the second is used to specify the width of the dialog box and finally the third is used to specify the height of the dialog box. If the last two parameters were not supplied, default values will be set.

After setting the height, width, top, and left properties to the div layer, we will make it visible by setting the display to block.

Note the use of window.onresize which will call the SetTopLeft and SetHeightWidth functions if the div layer is visible, which will make the layer re-locate itself.

The final line of code is used to set the div layer (id = confirmText) to the message sent by the developer.

Listing 3

function SetTopLeft(divLayer)
  // Get the dialogbox height
  var divHeightPer ='px')[0];
  // Set the top variable
  var top = (parseInt(document.body.offsetHeight) / 2) - (divHeightPer / 2)
  // Get the dialog box width
  var divWidthPix ='px')[0];
  // Get the left variable
  var left = (parseInt(document.body.offsetWidth) / 2) - (parseInt(divWidthPix)
    / 2);
  // set the dialogbox position to abosulute = 'absolute';
  // Set the div top to the height = top
  // Set the div Left to the height = left;

The above function is used to set the location of the dialog box. After some calculation, we get the top and the left where the div layer should be displayed and set them to the top and left property of this dialog box. First we get the div layer height (without the px) and then we divide the window height and width by 2 in order to centralize the dialog box, finally we set the div layer position to absolute.

Listing 4

function SetHeightWidth(divLayer)
  // Set the dialogbox width = divWidth + 'px';
  // Set the dialogbox Height = divHeight + 'px'

The above listing is used to set the height and the width of the dialog box. This function will be called whenever the window is resized and when the DisplayConfirmMessage method is called. Note that the only parameter it takes is the div layer object.

Listing 5

function SetText(txtButton1, txtButton2)
  // Set display text for the two buttons
  if (txtButton1 == null)
    document.getElementById('btnConfOK').innerText = txtFirstButton;
    document.getElementById('btnConfOK').innerText = txtButton1;
  // Set display text for the two buttons
  if (txtButton2 == null)
    document.getElementById('btnConfCancel').innerText = txtSecondButton;
    document.getElementById('btnConfCancel').innerText = txtButton2;

The above listing is used to display the text of the two buttons; this will give you the ability to change and customize their texts concerning your needs. This function takes two string parameters.

Listing 6

function SetDefaultButton(defaultButton)
  // Set the focus on the Cancel button

The above function is used to set the default selected button when the dialog box is visible; as I already mentioned, the default dialog box will set this button always to the "OK" button. Using this function you can also customize it the way you want. This function takes one string parameter.

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-2024  |  Page Processed at 2024-05-29 10:41:08 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search