PART II
Chapter 8: User Interface Design for Ajax 351
After all the various elements have been added to the dialog, the region is displayed at
the desired page position. However, there is one important consideration we need to
mention before pointing readers to the complete example online: the issue of modality.
Normally, alert() and confirm() dialogs are application modal, meaning that the user
must address them before moving on to another browser-based activity. There isn’t any
direct way to do this in JavaScript. There used to be an Internet Explorer–specific method
for doing this, but after being abused, it was removed. To simulate modality, the overlay
concept discussed in the previous section can be employed. First, create a <div> tag to
serve as the modality overlay.function createOverlay()
{
var div = document.createElement("div");
div.className = "grayout";
document.body.appendChild(div);
return div;
}Now make sure the appropriate CSS is applied to make the overlay translucent and
covering the region to shield from user activity. The class name set in the preceding function
does this and is shown here as reference..grayout{position: absolute;
z-index: 50;
top: 0px; left: 0px;
width: 100%; height: 100%;
filter:alpha(opacity=80);
-moz-opacity: 0.8;
opacity: 0.8;
background-color: #999;
text-align: center;
}Finally, append it in the document along with the dialog as shown here:var parent = document.createElement("div");
parent.style.display = "none";
parent.id = "parent";
var overlay = createOverlay();
overlay.id = "overlay";
parent.appendChild(overlay);var dialog = createDialog(type,message);
/* assume type and message are used to build
a particular type of dialog with the passed
message */
parent.appendChild(dialog);document.body.appendChild(parent);
parent.style.display = "block";