- Interrupting the User
- Building the Dialog Box
- Capturing the Mouse Interactions
- Capturing Keyboard Events
- Summary
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Building the Dialog Box
There are two common approaches to generating dialog boxes in web applications:
- The dialog box contents are included in the original HTML markup, but hidden from the user (for example, by setting the display CSS property to none). This approach, while quick to implement, is inflexible and might reduce the perceived relevancy of your content.
- JavaScript functions are used to build the dialog box as needed. Ideally, you should use the DOM calls as much as possible, resorting to the innerHTML property only when absolutely necessary.
Figure 1 shows the structure of the dialog box that we’ll build with JavaScript.
)
Figure 1 Structure for the JavaScript dialog box.
As we’ll use the DOM calls to create the dialog box structure, we’ll start the box-building process by defining a utility function that combines the common steps in creating a DOM element:
// xAddElement:
// Creates an HTML tag, appends it to the specified
// parent, sets its innerHTML to text, and sets its
// id and className.
//
function xAddElement(tag,parent,text,id,className) {
var el = document.createElement(tag);
if (txt) el.innerHTML = text;
if (id) el.id = id;
if (className) el.className = className;
parent.appendChild(el);
return el;
}
Before we blindly create the dialog box DIV, we should check whether it already exists, potentially reusing the existing one (in which case, we have to empty it first):
var dialog = xGetElementById("modalDialog");
if (!dialog)
dialog = xAddElement("DIV",document.body,null,"modalDialog");
xRemoveChildren(dialog);
After we’ve created the container DIV, we can add individual elements to it—caption, icon, prompt text, and button line:
xAddElement("P",dialog,caption,"modalCaption");
for (var i = 0; i < this.iconNames.length; i++) {
if (flags & (this.WARNING << i)) {
xAddElement("IMG",dialog,"","modalIcon").src = this.iconNames[i];
}
}
var modalContent = xAddElement("DIV",dialog,"","modalContent");
xAddElement("DIV",modalContent,prompt,"modalText");
var buttonLine = xAddElement("DIV",modalContent,"","modalButtons");
The last step in the build process is button creation—the individual buttons are inserted in the modalButtons DIV based on the values set in the flags argument:
var firstButtonLink;
for (var i = 0; i < this.buttonNames.length; i++) {
if (flags & (this.OK << i)) {
var button = xAddElement("P",buttonLine,null,null,"modalButton");
var link = xAddElement("A",button,this.buttonNames[i],
null,"modalButtonLink");
link.href = "#";
button.id = "modalButton_"+(this.OK << i);
addLinkListener(link,me,this.OK << i);
firstButtonLink = firstButtonLink || link;
}
}
if (firstButtonLink) {
firstButtonLink.focus();
this.firstButtonLink = firstButtonLink; }
The buttons are created as paragraphs containing a single link (A element) to allow the keyboard users to select them with the Enter key. The benefits of using links to create clickable elements are explained in my article "JavaScript Progressive Enhancement in Practice."
The addLinkListener function attaches an onclick event handler to the link. (The same event handler is also used in keyboard event processing.)
function addLinkListener(button,me,value) {
button.clickFunction = function () { me.finishDialogBox(value); };
xAddEventListener(button,"click",button.clickFunction);
}
When the dialog box is created, we call the centerDialog function to position it in the center of the visible screen:
function centerDialog(d) {
var xpos = (xClientWidth() - xWidth(d)) / 2;
var ypos = (xClientHeight() - xHeight(d)) / 2;
xpos = xpos < 0 ? 0 : xpos;
ypos = ypos < 0 ? 0 : ypos;
xMoveTo(d,xpos + xScrollLeft(),ypos+xScrollTop());
}
As you’ve probably noticed, the elements of the dialog library contain no embedded formatting or layout information; all the formatting is based on CSS identifier and class selectors. You can download a sample CSS stylesheet as well as the complete JavaScript code from my web site.