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.
