Pro HTML5 and CSS3 Design Patterns

CHAPTER 20 ■ ALERTS

Pop-Up Alert

HTML

<h1>Popup Alert</h1>

<div>

<p>A pop-up can show tips and help.

<span class="popup-trigger" id="pt1"><img src="help.gif" alt="tip" />

<span class="popup medium border">Pop-up help goes here.</span></span>

<br />

A pop-up can show the definition of a

<dfn class="popup-trigger" id="pt2">word.

<span class="popup medium border">Pop-up definition goes here.</span></dfn>

<br />

A pop-up can preview the target of a

<a class="popup-trigger" id="pt3"

href="http://www.cssdesignpatterns.com">link

<img class="popup border" src="css-design-patterns-preview.jpg"

alt="cssDesignPatterns.com preview" /></a>.</p></div>

CSS

*.popup-trigger { position:relative; }

*.popup { position:absolute; left:0; top:1em; z-index:1;

padding:5px; text-align:center; }

*.popup-trigger *.popup { visibility:hidden; }

/* Nonessential rules are not shown */