CHAPTER 20 ■ ALERTSPop-Up Alert
Problem You want to insert a pop-up to show helpful information to the reader. You want the pop-
up to be hidden until the reader moves the mouse over it or clicks it. You want the browser
to show the pop-up automatically like a tooltip, and you want it to remain showing until the
user clicks it or moves the mouse away from it. You want an unobtrusive way to show the
reader that the pop-up is present. You also want it to be accessible to nonsighted users. You
want complete control over the style of the pop-up box, the position of the pop-up box, and
the style of its contents. You do not want to insert any JavaScript into the document body.
Solution You can insert an inline element with the popup-trigger class into your document. In the
example, I used , , and elements. When the user mouses over or clicks the
contents of the pop-up-trigger element, this triggers the browser to display the pop-up. You
can style the pop-up trigger with position:relative so you can position the pop-up
relative to it.
Inside the pop-up-trigger element you can insert an inline element to hold the pop-up
content. In the example, I use and elements. You can assign this element to
the popup class. You can absolutely position the pop-up element to remove it out of the
normal flow. You can use left:0 and top:1em to position the pop-up immediately below
the pop-up trigger. You can use z-index:1 to make sure pop-ups are displayed in front of
pop-up triggers.
You can use JavaScript libraries to dynamically assign events to pop-up-trigger elements.
This keeps the markup in the body completely free from JavaScript, as described in the
following sections.
Pattern^
HTML
CSS
.popup-trigger { position:relative; }
.popup { position:absolute; left:0; top:1em; z-index:1; }
Location This pattern works inline.
Limitations Internet Explorer 7 (and earlier versions) display pop-up triggers in front of pop-ups. You
can solve this problem by laying out your page so that pop-up triggers are displayed on one
side and pop-ups are displayed on the other. You can also solve this problem by assigning a
unique ID to each pop-up trigger and styling each one so that it displays behind the
previous one. In the example, I conditionally loaded a style sheet just for Internet Explorer,
containing the following:
#pt1 { z-index:3; }
#pt2 { z-index:2; }
#pt3 { z-index:1; }