Popup Div | JavaScriptSource

Popup Div

Jeroen Haan Dec 8, 2006
Hide

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci.



General

This script will open a floating layer popup. The layer stays on top, allowing the user to work in the main window while still being able to view the popup. The popup window stays in the same place, even when the user scrolls down the page. It also works with image maps.


This link uses the onclick event handler.

Open popup

This next one uses the javascript link inside the href tag.
Open popup

And this one uses the input button inside a form tag.

It can also be used in an image map. Here, the word 'Webhost' contains the link

Notes

In the source code you see return false and target='_self"'. These are measures are to prevent unwanted behavior when the base target is set to _blank or when you want to provide the user with an alternative link in case JavaScript isn't turned on in the user's browser.

The first layer should be place right after the <body> tag.

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: popupDiv.js


CSS

Paste this code into your external CSS file or in the <style> section within the HEAD section of your HTML document.


Head

Paste this code into the HEAD section of your HTML document.


Body

Paste this code into the BODY section of your HTML document


Leave a Response

(31 comments)

It should be working just fine now.

Lee Underwood Jan 29, 2008

Due to the limitations of these comments, you will need to submit your question to the [a href="http://www.webdeveloper.com/forum/forumdisplay.php?f=3"]JavaScript Forum[/a] for further help.

Lee Underwood Jan 29, 2008

I can&#39;t seem to get your code to work.

Terry Jan 17, 2008

window.onscroll = self.setTimeout("self.placeIt('layer1')",500);[br /][br /]window.onscroll has an error in internet explorer 6[br /]"Not implemented"[br /][br /]it works fine in firefox[br /][br /]How can I resolve this?[br /][br /]thanks[br /]fabio

fabiodoo Dec 7, 2007

Jose,[br /]I removed your code. This area is more for comments than a discussion area. You will need to contact the author or submit your question to the [a href="http://www.webdeveloper.com/forum/forumdisplay.php?f=3"]JavaScript Forum[/a] for further help. Thanks!

Lee Dec 4, 2007