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.
Let us now examine the procedure to create a custom dialog box.
This dialog box consists of the below controls.
1. Three div layers
2. Two web server controls (buttons)
<div id="divConfMessage" runat="server" style="BORDER-RIGHT:black thin solid;
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.
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
a - DisplayConfirmMessage(msg,width,height)
f - SetDefaultButton(defaultButton)
function DisplayConfirmMessage(msg, width, height)
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.
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.
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.
function SetText(txtButton1, 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.
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.
In this section you will learn how you would implement this dialog box into your project. Navigate to a webform, go to its design mode and paste the HTML code between the <form> tag.
The first thing you need to do is to set the text to be displayed on the buttons (I have chosen Yes and No), the second thing is to display the confirmation message and send the appropriate parameters, the third thing is to set the default button, in this case I chose the Yes button, finally the return false is used to cancel the postback.
Now to call this function on button click, add the following code to the page_load event.
The above figure shows the confirmation dialog box when the user clicks on the Button. Note that this is displayed in the maximized window size.
The above figure will show the new location of the dialog box by just resizing the window.
After reading this article you will realize how easy it is to create customizable controls upon our needs.