350 Part II: Developing an Ajax Library^
In the case that it is impossible to recover from a problem or that the user needs to be
informed of the application status, some sort of dialog must be issued. In JavaScript, you
may resort to the various methods of the Window object like alert() and confirm().Unfortunately, these particular dialogs are not customizable. You may opt to try to
create custom dialogs using the generic window.open() method. However, the dialogs
may be blocked by either browser-based or third-party pop-up blockers installed by the
user. To address both the customization concerns and the pop-up blockers, many designers
have turned to what we dub “div dialogs,” named for the XHTML <div> tag used to
create them. Using CSS, designers can position <div> tag based regions over content and
customize them visually in whatever manner they like.The creation of a div dialog follows standard DOM tag building code. First, the <div>
tag that would be used as the custom dialog would be created and positioned.var dialog = document.createElement("div");
dialog.className = "center";Then the various elements would be added to the dialog, typically one at a time unless
you resort to using the innerHTML property.var dialogTitle = document.createElement("h3");
var dialogTitleText = document.createTextNode("Warning!");
dialogTitle.appendChild(dialogTitleText);
dialog.appendChild(dialogTitle);
// etc.We show only a snippet here because it gets quite lengthy as the messages and various
controls to dismiss the dialog are added, and the repetitious code adds little to the
discussion. Once performed, though, the procedure can be abstracted into a custom
function like createDialog(), where you could indicate the type of dialog, message, and
style needed.