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

This information lives on a web page hosted at the following web address: 'https://www.omegajunior.net/code/'.

A.E.Veltstra
July 31, 2007 - March 3, 2012

How to make a pop-under / lightbox / modal dialog / layover / overlay, in a cross-browser way.

A word from a sponsor:


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


2011-05-03


2009-10-28


2008-09-06



Technical Details

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




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:



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



Found problematic in the following browsers:

Need problem solving?

Talk to me. Let's meet for coffee or over lunch. Mail me at “code at omegajunior dot net”.