A technique for creating accessible popups using simple semantic HTML and unobtrusive jQuery code.
Advantages
- Popup content is still accessible when JavaScript is disabled.
- Popup content is separate from main HTML document which makes adding new popups and linking from multiple pages simple.
- Easy to use. Doesn’t rely on special classes, IDs or inline JavaScript events.
- Popup content is loaded through a jQuery AJAX method so there is no page refresh.
HTML for Popup Links (add to your main HTML documents):
<a href="popups/help.html" target="_blank">View help popup</a>
To trigger display of popups you need only add an ordinary link such as above. This links to a separate html document for each popup. The file names for the popup documents can be whatever you like. The only thing to remember is to place all the popup documents into a separate “popups” directory.
Example HTML for Popup:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Help Popup</title> </head> <body> <div id="popup-wrapper"> <h2>Help</h2> <p>This is some helpful information.</p> </div><!-- /#popup-wrapper --> </body> </html>
Within your “popups” directory simply add simple html documents such as above for each popup you wish to display. The only important thing here is that all the content within the body must be wrapped by a div with the id “popup-wrapper”.
Example CSS:
#greyscreen {
background: #000;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
-moz-opacity: .50;
opacity: .50;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#popup {
background: #FFF;
border: 3px solid blue;
padding: 10px;
width: 300px;
height: 350px;
margin-top: -185px;
margin-left: -160px;
overflow: auto;
position: fixed;
top: 50%;
left: 50%;
}
#popup .close {
cursor: pointer;
display: inline-block;
float: right;
}
These are just basic styles for your popups to get you started. You can modify these to suit your particular site design.
(NOTE: IE6 doesn’t support “position: fixed”.)
jQuery Code:
$(document).ready(function() {
// Unobtrusive Popups
var $popup = $('<div id="popup"></div>');
var $greyscreen = $('<div id="greyscreen"></div>');
$popup.prependTo('body').hide();
$greyscreen.prependTo('body').hide();
$('a[href*=popups]').click(function() {
$greyscreen.show();
$popup
.fadeIn()
.load($(this).attr('href') + ' #popup-wrapper', function() {
$('<span class="close">Close</span>').prependTo($popup);
});
return false;
});
$greyscreen.click(function() {
$popup.hide();
$greyscreen.hide();
});
$('#popup .close').live('click', function() {
$popup.hide();
$greyscreen.hide();
})
});
Make sure to link to the jQuery library from within the head of your main HTML document so the above code will work.
How it works
Two separate divs for a greyscreen effect and for the popup are created dynamically. These get appended to your main HTML document then are hidden until needed. The script then looks for all links pointing to files within the “popups” directory and attaches special actions when the links are clicked. When users click these links the popup and greyscreen divs are displayed and the popup content is loaded into the popup div. A close button also gets appended to the popup. (The reason for adding the close button using jQuery is because if JavaScript were turned off it would have no purpose.) Finally, actions are added to both the greyscreen div and the close button so that once clicked upon they will again hide the popup.
See it in action:
http://www.bentomaster.com/ Scroll down to the bottom of the page and click the “credits” link.
CSS Web Design 