The JavaScript Source: Miscellaneous : Popup Div

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

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

Notes

Created by: Jeroen Haan
Web Site: http://www.haan.net/
Posted: December 8, 2006

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

/* -----------------------------------------------
   Floating layer - v.1
   (c) 2006 www.haan.net
   contact: jeroen@haan.net
   You may use this script but please leave the credits on top intact.
   Please inform us of any improvements made.
   When usefull we will add your credits.
  ------------------------------------------------ */

x = 20;
y = 70;
function setVisible(obj)
{
	obj = document.getElementById(obj);
	obj.style.visibility = (obj.style.visibility == 'visible') ? 'hidden' : 'visible';
}
function placeIt(obj)
{
	obj = document.getElementById(obj);
	if (document.documentElement)
	{
		theLeft = document.documentElement.scrollLeft;
		theTop = document.documentElement.scrollTop;
	}
	else if (document.body)
	{
		theLeft = document.body.scrollLeft;
		theTop = document.body.scrollTop;
	}
	theLeft += x;
	theTop += y;
	obj.style.left = theLeft + 'px' ;
	obj.style.top = theTop + 'px' ;
	setTimeout("placeIt('layer1')",500);
}
window.onscroll = setTimeout("placeIt('layer1')",500);

CSS

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

#layer1 {
	position: absolute;
	visibility: hidden;
	width: 400px;
	height: 300px;
	left: 20px;
	top: 300px;
	background-color: #ccc;
	border: 1px solid #000;
	padding: 10px;
}

#close {
	float: right;
}

Head

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


<script type="text/javascript" src="popupDiv.js"></script>

Body

Paste this code into the BODY section of your HTML document


<div id="layer1">
  <span id="close"><a href="javascript:setVisible('layer1')" style="text-decoration: none"><strong>Hide</strong></a></span>
  <p>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.</p>
  <br><br>
  <img src="award.gif" width="120" height="65" border="0">
</div>

<p>This link uses the onclick event handler.<br>
<a href="#" onclick="setVisible('layer1');return false" target="_self">Open popup</a></p>

<p>This next one uses the javascript link inside the href tag.<br>
<a href="javascript:setVisible('layer1',true)">Open popup</a></p>

<form>
And this one uses the input button inside a form tag.<br>
  <input type="button" value="Open popup" onclick="setVisible('layer1')">
</form>

<p>It can also be used in an image map. Here, the word 'Webhost' contains the link<br>
<img src="award.gif" width="120" height="65" border="0" usemap="#Map">
  <map name="Map" id="Map">
    <area shape="rect" coords="1,1,113,23" href="#" onclick="setVisible('layer1');return false" target="_self">
  </map>
</p>

User Comments

Add a comment, suggestion, or correction

Comments feed

next comments...

Navigation Menu

Internet.commerce

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

CSS

Head

Body

User Comments

30. From: Terry
image map mouse over popup
01/18/2008 00:59:11

31. From: Lee Underwood (Admin)
01/29/2008 12:50:23

28. From: fabiodoo
window.onscroll error ie6
12/07/2007 06:49:41

29. From: Lee Underwood (Admin)
01/29/2008 11:31:38

26. From: jose
the function not working
11/26/2007 23:39:54

27. From: Lee (Admin)
12/04/2007 10:57:31

23. From: saiful
08/28/2007 03:12:16

24. From: Lee (Admin)
10/03/2007 14:53:44

19. From: Mark
06/14/2007 14:00:35

20. From: Lee (Admin)
08/07/2007 14:43:42

Navigation Menu

Internet.commerce

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

CSS

Head

Body

User Comments

30. From: Terryimage map mouse over popup01/18/2008 00:59:11

31. From: Lee Underwood (Admin)01/29/2008 12:50:23

28. From: fabiodoowindow.onscroll error ie612/07/2007 06:49:41

29. From: Lee Underwood (Admin)01/29/2008 11:31:38

26. From: josethe function not working11/26/2007 23:39:54

27. From: Lee (Admin)12/04/2007 10:57:31

23. From: saiful08/28/2007 03:12:16

24. From: Lee (Admin)10/03/2007 14:53:44

19. From: Mark06/14/2007 14:00:35

20. From: Lee (Admin)08/07/2007 14:43:42

30. From: Terry
image map mouse over popup
01/18/2008 00:59:11

31. From: Lee Underwood (Admin)
01/29/2008 12:50:23

28. From: fabiodoo
window.onscroll error ie6
12/07/2007 06:49:41

29. From: Lee Underwood (Admin)
01/29/2008 11:31:38

26. From: jose
the function not working
11/26/2007 23:39:54

27. From: Lee (Admin)
12/04/2007 10:57:31

23. From: saiful
08/28/2007 03:12:16

24. From: Lee (Admin)
10/03/2007 14:53:44

19. From: Mark
06/14/2007 14:00:35

20. From: Lee (Admin)
08/07/2007 14:43:42