Creating Pop-up Notes with CSS and JavaScript Part II

Creating multiple pop-up notes

Once we’ve taken an in-depth look at our previous example, it’s easy to generate multiple pop-up notes with JavaScript. The basic idea rests on tying each link displaying a note to the corresponding <div> element that includes the pop-up note content. When we set up the relationship between the elements, all we need to do is write the JavaScript code for programmatically manipulating the visual display of the pop-up notes. So, let’s begin defining our CSS code:

<style type="text/css">

p {
            font: normal 11px "Verdana", Arial, Helvetica, sans-serif;
            color: #000;
}

a.special:link,a.special:visited {
            font: bold 11px "Verdana", Arial, Helvetica, sans-serif;
            color: #00f;
            text-decoration: underline;
}

a.special:hover {
            color: #f00;
}

.note {
            position: absolute;
            top: 0px;
            left: 0px;
            background: #ffc;
            padding: 10px;
            border: 1px solid #000;
            z-index: 1;
            visibility: hidden;
            font: bold 11px "Verdana", Arial, Helvetica, sans-serif;
            color: #000;
}

</style>

The CSS declarations are almost identical to those corresponding to the single pop-up note. We’ve redefined the <p> tag, for this example, and then we’ve declared the "special" class to get the links a little styled. Finally, we define a class named "note," which will apply the style to all of the pop-up notes present on the Web page. Since all the notes will be hidden from view, they’re absolutely positioned to X-Y coordinates: 0px 0px. Their visibility property is set to "hidden" initially, but, as we know, will be changed accordingly.