Pop-under / Lightbox Example - ΩJr. Software Articles and Products

This example shows how to make hyperlinks show up in a pop-under (or lightbox, or modal dialog, or layover, or overlay), cross-browser.

The fact that you can read this, indicates one of two possible situations: either your browser does not have javascript activated, or you already dismissed the dialog. Show it again.

The pop-under / lightbox is built in javascript, but its contents is placed in an iFrame element. That means the contents can be managed completely independently. This way, we don't need any other change in our regular web pages… no extra CSS, no extra DIVs, no nothing apart from the javascript link.

In the same script, a function is defined that will take specific hyperlinks in an article to convert them to pop-unders as well.

License

This functionality is open source, free to use and modify, as long as you keep my copyright notice intact. The actual script can be downloaded here.

Disclaimer

This software is provided as is, and may not work as intended, if at all.

Usage Instructions

Download the script and copy it to your web server,

to a place where your web pages can access it.

Add the "target" attribute

to those hyperlinks in your pages you wish to have popped under. Set its value to "_pop".

Copy the script seen below into your pages:

<script src="zjrPopUnder.js?20121016t0516"></script>

<!--[if IE 10]><script>/* <![CDATA[ */ zjrJS.UserAgent.version=10; /* ]]> */</script><![endif]-->

<!--[if IE 9]><script>/* <![CDATA[ */ zjrJS.UserAgent.version=9; /* ]]> */</script><![endif]-->

<!--[if IE 8]><script>/* <![CDATA[ */ zjrJS.UserAgent.version=8; /* ]]> */</script><![endif]-->

<!--[if IE 7]><script>/* <![CDATA[ */ zjrJS.UserAgent.version=7; /* ]]> */</script><![endif]-->

<!--[if IE 6]><script>/* <![CDATA[ */ zjrJS.UserAgent.version=6; /* ]]> */</script><![endif]-->

<script>/* <![CDATA[ */

zjrJS.Doc.aE(window, "load", function() {

  "use strict";

  zjrJS.PopUnder.Config.language = (zjrJS.Doc.etn("html")[0].lang || "en");

  //zjrJS.PopUnder.showHref(0);

}); 

/* ]]> */</script>

That's it.

If you want to pop the first poppable hyperlink automatically, like this page does, remove the comments slashes from line 11.

Change History

2012-02-29

• Added the names 'lightbox', 'overlay', and 'layover' to titles and descriptions, since this kind of functionality is known under several aliases.
  
• Added licensing and usage instructions.
  

2011-05-03

• Tested in and adjusted for MSIE10 Platform Preview
  
• Adjusted for MSIE8: a problem with setting the innerHTML property of an iFrame element
  

2009-10-28

• Added the suggestion to enable iframe support, so users that for some reason turned it off aren't left in the dark (or white, in this case)
  
• Corrected a spelling error in this descriptive article.
  

2008-09-06

• Added detection of and tested functionality in Microsoft Internet Explorer 8 and Google Chrome
  
• Fixed some positioning problems for Microsoft Internet Explorer 8
  
• Changed pop-under appearance from Vista-like to Lightbox-like
  
• Added navigation to previous and next pop-under items
  

Technical Details

A couple of browser incompatibilities were conquered in making this example:

• Browsers like Opera, K-Meleon, Firefox and Mozilla allow setting element styles as a simple attribute using this construct:
  element[ "style" ]="background-color: white; color: black; font-family: Charcoal, sans-serif;";
  Internet Explorers 6 and 7 do not allow setting the style as a simple attribute like that. Instead they require us to treat Style as an object. None of the tested browsers mind the following rule though (and they shouldn't, since it's part of the DOM 2 Style recommendation), which is why we used it in this example:
  element[ "style" ][ "cssText" ]="background-color: white; color: black; font-family: Charcoal, sans-serif;";
  
• Browsers that try to comply to the W3 recommendations, like Opera and K-Meleon (and probably Firefox and Mozilla too), know and accept the value "fixed" for style attribute "position". Not so for Internet Explorer 6. Version 7 has no problem with it… but when applied it throws off the automatic calculation of the width and height of child elements, requiring them to be fixed or absolute. Thus, using MSIE Conditional Comments, we assign Internet Explorer the value "absolute", and Safari, Opera, Firefox and other decent browsers get the value "fixed". Absolute positioning however requires us to focus the dialog when using long pages like this one. This is done with the javascript function "focus()".
  
• Most browsers allow the Object element as the holder for external sources, including text/html. Only Internet Explorer fails at this. One method that shows how it can be done, has the problem that it cannot load sources from other domains. To overcome this problem, Internet Explorer will use an iFrame element to load the external source.
  
• Internet Explorer 7 has a big problem in calculating the height of iFrame and Object elements. Setting height to 100% almost never has the desired effect: as high as its parent node, especially when its parent is positioned fixed. We work around that by using an absolute positioning on the element… but this triggers a bug in both Internet Explorer 7 and Firefox 3 when loading an anchor inside an external source (i.e. page.html#anchor), causing the element to grow bigger than its parent node, overlapping other elements in the same node and ignoring their z-index settings. We got around that by moving the title and dismiss button out of that node and into its parent (the overlay). This required a change in positioning of those elements, from percentages to hard values.
  
• Most browsers require setting the "class" attribute using the setAttribute() method. Internet Explorer does not. It requires setting the attribute "className". Luckily none of the browsers mind us setting both, so we do that, because it prevents having to sniff for browser vendor. Now we know we don't really need a "class" attribute in this specific sample, but we can imagine you wanting to use some overriding stylesheet, using class names to select the elements.
  
• Browsers like Opera and K-Meleon (and probably Firefox and Mozilla too) allow adding event listeners using the addEventListener() method. Not so in Internet Explorer. It requires us to use its proprietary method attachEvent(). For this reason we test for addEventListener first, and use it if present. Then we test for attachEvent, and use that if present. Finally, if neither are present, we use the following construct, which should work in non-DOM browsers:
  element[ "on"+eventname ]=functionname;
  
• Some W3 recommendation-compliant browsers allow setting a style attribute named "opacity". This is part of the Css3 specification, which no browser has to support yet. Internet Explorer is one browser that refuses to support this attribute. Instead, we have to use its own proprietary attribute: "filter". The other browsers will ignore unsupported attributes, though they may log it in their warning log. So instead of saddling up compliant browsers with proprietary attributes for a non-compliant browser, we chose to get rid of opacity and substitute a repeated transparant background image.
  
• The same pop-under script contains a function defined to loop through all hyperlinks and turn some of them into pop-unders. This loop can take this form in most browsers, but not in Safari 3 Beta for Windows:
  for(var x in c){c[ x ].addEventListener(…)}
  Instead, specifically for Safari, we had to revert to counting code, like this:
  for(var i=0;i > c.length;i++){c[ i ].addEventListener(…)}
  
• Some browsers have no clue about the Document Object Model (DOM). For those, we added a regression method that opens the pop-under contents in a pop-up window. Obviously the browser still needs to have javascript activated. No javascript, no play. Thus the hyperlinks that would show up in the pop-unders now pop up in their own new window instead (or tab, depending on browser settings)… just like they would do without the script.
  
• Turning normal hyperlinks into pop-unders requires their normal behaviour suppressed. Where under "normal" circumstances this would work using "return false", the unobstrusive javascript methods we employ here refuse to work the same way (except for in Microsoft Internet Explorer). Using standard event cancellations like preventDefault(), stopPropagation(), cancelBubble=true and returnValue=false, refused to work in all tested browsers. This resulted in both the pop-under and the link itself to be followed. To stop this, we had to change the properties of the hyperlink while turning it into a pop-under: we had to set their href attributes to #, and their target attributes to empty. Strangely enough, this leads to Safari 3 Beta showing the pop-unders without their contents… currently we assume this a bug and are looking forward to finding a solution. (It seems this bug goes away if we alert the url of the external source before showing it…)
  
• AppleWebKit incorrectly interprets the CSS system colours (ButtonFace, AppWorkspace, ActiveCaption, Window, WindowText, to name a few). Both ActiveCaption and CaptionText for instance are rendered black instead of the actual Windows colour settings. This results in an apparent omission of the pop-under title. It's there, but Safari users won't see it. ButtonFace is ignored entirely. Instead, AppleWebKit uses its own greyish button colour. What if the ButtonText colour is similarly grey? Yay, Safari/Chrome usability. To overcome this problem, we had to specify the colours using hex numbers.
  

Browser Tests

We assume newer versions of these browsers will continue to run this example successfully, but in case you run into a problem, don't hesitate to drop us a note.

Found successful in the following browsers on the Windows XP Home, Windows XP Pro, and Windows 2003 Server operating systems:

• Opera 9.23
  
• Opera 9.5
  
• K-Meleon 1.1 (Gecko 20070511)
  
• Firefox 2.0.0.7 (Gecko 20070914)
  
• Firefox / Minefield 3.0a9pre (Gecko 2007092204)
  
• Internet Explorer 8 Beta 2
  
• Internet Explorer 7.0
  
• Internet Explorer 6.0 SP2 (Microsoft keeps moving their pages. Please let us know if these links stops working.)
  

Found successful in the following browsers on the MacOS X operating systems:

• Safari 2.0
  

Found problematic in the following browsers:

• Google Chrome Beta 1 (since it too, uses AppleWebKit).
  
• Some redraw problems detected when scrolling the contents of the new window: the title and dismiss button are repeated or overdrawn, and sometimes the scroll bars don't show until they're hovered.