JavaScript dialogs (usual suspects)
You’ve undoubtedly seen them, used them, and most likely gotten annoyed by them but nevertheless dialogs are fundamental part of websites. They enable interactivity with the end user and so forth …
The usual suspects
alert(), confirm(), prompt()
To certain extent the built in standard JS dialogs can achieve a certain level of interactivity but they only go so far. For example if you want to give the end user a list of choices before a “confirm” such a task cannot be done with ordinary confirm() or even the prompt dialog.
Enter modal dialogs
Definition of a modal dialog as taken from Wikipedia
“A modal window is a child window that requires users to interact with it before they can return to operating the parent application, thus preventing the workflow on the application main window.”
What that means to me is a div or any other container element superimposed on the window using css z-index.
The z-index property gives HTML pages (normally two-dimensional) a third dimension; it was introduced in CSS 2.1 February 25, 2004 candidate recommendation. In addition to the horizontal and vertical positions, elements also have “z-axis” which allows them to lay on top of each other. An element with greater z-index will always appear in front of an element with a lower Z-index order.
The idea here is to “inactivate” all the elements in an html document and present a dialog which must be “processed” by the user before any other actions can be taken.
Creating modal dialog (easy guide)
The CSS
/* This is the holder element; any divs within this element will be superimpose in the page*/
#myElement
{
z-index: 100;
position: fixed;
left: 0;
top: 0;
width:100%;
height:100%;
}
Note: the positioning is required to ensure that this div covers the entire page.
The HTML
Step 1: Create the holder div
<div id="myElement "></div>
Step 2: Div that will contain the content
</pre> <div id="myElement "> <div>ANYTHING HERE HAS A GREATER INDEX </div> </div> <pre>
Example 1
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
<title>JavaScript Modal Example 1</title>
<style type="text/css">
/* This is the hidden div*/
#confirmationOverlay
{
z-index: 1000;
background-color: #DBDBDB;
position: fixed;
left: 0;
top: 0;
width:100%;
height:100%;
}
#confirmationOverlay div
{
width:400px;
margin: 100px auto;
border:1px solid #000;
padding:15px;
text-align:center;
background-color:#FFF;
}
</style>
<script>
function proceed()
{
var element = document.getElementById('confirmationOverlay');
if (element != null)
{
element.style.display = (element.style.display == "none") ? "block" : "none";
}
}
</script>
</head>
<body>
<h1>Examle 1</h1>
<blockquote>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<p><a href="#" onClick="proceed()"><img src="images/proceed.png" style="border: none;" /></a></p>
</blockquote>
<!-- This is a hidden div that will be toggled; thanks to z-index it will superimpose itself -->
<div id="confirmationOverlay" style="display:none;">
<div>
<p>Are you ready to check in...?</p>
<p>
<a href="#" onClick="proceed();"><img src="images/OK.png" style="border: none; width:100px; hieght:70px;" /></a>
<a href="#" onClick="proceed();"><img src="images/Cancel.png" style="border: none; width:100px; hieght:70px;" /></a>
</p>
<p id="loadingImg" style="display:none;"><img src="images/loading.gif" style="border: none;" /></p>
</div>
</div>
</body>
</html>
Example 2
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
<title>JavaScript Modal Example 2</title>
<link rel="stylesheet" href="css/general.css" />
<script type="text/javascript" src="js/script.js" ></script>
</head>
<body>
<h1>Examle 2</h1>
<blockquote>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<p><a href="#" onClick="proceed('confirmationOverlay')"><img src="images/proceed.png" style="border: none;" /></a></p>
</blockquote>
<!-- This is a hidden div that will be toggled; thanks to z-index it will superimpose itself -->
<div id="confirmationOverlay" style="display:none;">
<div>
<p>Are you ready to check in...?</p>
<p>
<a href="#" onClick="checkIn('loadingImg');"><img src="images/OK.png" style="border: none; width:100px; hieght:70px;" /></a>
<a href="#" onClick="cancel('confirmationOverlay');"><img src="images/Cancel.png" style="border: none; width:100px; hieght:70px;" /></a>
</p>
<p id="loadingImg" style="display:none;"><img src="images/loading.gif" style="border: none;" /></p>
</div>
</div>
</body>
</html>
/* This is the hidden div*/
#confirmationOverlay
{
z-index: 1000;
position: fixed;
left: 0;
top: 0;
width:100%;
height:100%;
}
#confirmationOverlay div
{
width:400px;
margin: 100px auto;
border:1px solid #000;
padding:15px;
text-align:center;
}
/* Text styling */
.confrimTxt
{
font-weight:normal;
font-variant:small-caps;
color:#000000;
letter-spacing:4pt;
word-spacing:10pt;
font-size:10px;
font-family:arial, helvetica, sans-serif;
line-height:1;
}
blockquote
{
display: block;
padding: 0 60px;
width: 350px;
}
blockquote:before, blockquote:after
{
color: #4AA02C;
display: block;
font-size: 700%;
width: 50px;
}
blockquote:before
{
content: '\201C';
height: 0px;
margin-left: -0.55em;
}
blockquote:after
{
content: '\201D';
height: 50px;
margin-top: -80px;
margin-left: 3.10em;
}
function proceed(id)
{
toggleDiv(id);
hideProgressImg();
}
function checkIn(id)
{
toggleDiv(id);
// Do checks, make AJAX call etc.
}
function cancel(id)
{
toggleDiv(id);
hideProgressImg();
}
function toggleDiv(id)
{
var element = document.getElementById(id);
if (element != null)
{
element.style.display = (element.style.display == "none") ? "block" : "none";
}
else
{
alert("Cannot find element with id:"+id);
}
}
function hideProgressImg()
{
document.getElementById('loadingImg').style.display = "none";
}
You got to love jQuery
You got to love jQuery. If you familiar with jQuery you won’t be surprised to know that modal functionality is already implemented for you in that fun packed library. There are plenty of very good tutorials that you can try out. With jQuery I found that once you get the hang of the fundamentals its plain sailing from there onwards.
Techie Ranch 
Leave a comment