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.

Procedure

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>
   <div style="Z-INDEX: 105;HEIGHT: 2%;BACKGROUND-COLOR: white;TEXT-ALIGN: center">
   </div>
   <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>
   </div>
 </div>

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

               button.

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
  else
    divWidth = width;
 
  // Set default dialogBox height if null
  if (height == null)
  divHeight = 90
  else
    divHeight = height;
 
 
   // Ge the dialogbox object
  var divLayer = document.getElementById('divConfMessage');
  // Set dialogbox height and width
  SetHeightWidth(divLayer)
  // Set dialogbox top and left
  SetTopLeft(divLayer);
  
  // Show the div layer
  divLayer.style.display = 'block';
  // Change the location and reset the width and height if window is resized
  window.onresize = function()
  {
    if (divLayer.style.display == 'block')
     {
      SetTopLeft(divLayer);
      SetHeightWidth(divLayer)
    }
  }
  // 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 = divLayer.style.height.split('px')[0];
 
  // Set the top variable
  var top = (parseInt(document.body.offsetHeight) / 2) - (divHeightPer / 2)
  // Get the dialog box width
  var divWidthPix = divLayer.style.width.split('px')[0];
  
  // Get the left variable
  var left = (parseInt(document.body.offsetWidth) / 2) - (parseInt(divWidthPix)
    / 2);
  // set the dialogbox position to abosulute
  divLayer.style.position = 'absolute';
  
  // Set the div top to the height
  divLayer.style.top = top
 
  // Set the div Left to the height
  divLayer.style.left = 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
   divLayer.style.width = divWidth + 'px';
  // Set the dialogbox Height
  divLayer.style.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;
  else
    document.getElementById('btnConfOK').innerText = txtButton1;
 
  // Set display text for the two buttons
   if (txtButton2 == null)
    document.getElementById('btnConfCancel').innerText = txtSecondButton;
  else
    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
   document.getElementById(defaultButton).focus();
}

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.

Implementation

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.

Now create a javascript file called CustomDialog.js in your application root folder, paste all the JavaScript functions and add the following code in the <head> section in the HTML.

Listing 7

<script language="javascript" src="CustomDialog.js"></script>

The above code will link the javascript file you already created to the webform. After this stage, you can add JavaScript code to call the functions on button click, for example.

Listing 8

<script language = JavaScript> 
 function ShowMessage()
{
  SetText('Yes', 'No');
 
  DisplayConfirmMessage('are you sure', 180, 90)
 
  SetDefaultButton('btnConfOK');
  return false;
}
</script>

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.

Listing 9

Button1.Attributes.Add("onclick","return ShowMessage()");

Figure 1

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.

Figure 2

The above figure will show the new location of the dialog box by just resizing the window.

Downloads

[Download Sample]

Conclusion

After reading this article you will realize how easy it is to create customizable controls upon our needs.

Happy Coding

Posted via email from fenildesai's posterous