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 
glanman
/ March 9, 2012Hi – I can’t make the close bit of the code work correctly. When I load the popup the first time, the close button works correctly. But anytime I load the popup after the first time, it doesn’t work to close the popup.
I was wondering if you know how I can fix this problem?
kristinlbradley
/ March 11, 2012What browser were you using? Did you use the code as is or did you make any modifications that may possibly affect the functionality? One important point is that for attaching the mouse click event to the “close” button you need to use “.live” rather that “.click” in the jQuery code since the close button is created dynamically. http://api.jquery.com/live/
I did a quick test myself using only the code from my article in Firefox and Chrome and the close button worked no matter how many times I opened and closed the popup.
karthick b
/ December 4, 2016hi kristin,
nowadays they through up automatically without needing the user to click any button. Can you guide on how to do this
kristinlbradley
/ December 5, 2016Nowadays? There’s been annoying popup ads that display automatically probably since the ’90s. Generally it’s not a good ideas to display popups/modals without the user taking some action first such as clicking a link. There are a few exceptions such as if the user is logged into a secure site and you want to warn them their user session is about to expire if they haven’t taken any actions after a period of time. In that case you would trigger the display after a certain timeout period.