Full version: jsB@nk » Browser » Popup » DIV Layer Popup onClick
URL: https://www.javascriptbank.com/div-layer-popup-onclick.html
This JavaScript helps you open floating layer popups. The layers alway stay on top, allowing your visitors to work in the main window while still being able to view the content of popups. The window popups stay in the same place, even when the user scrolls down the page. It also works with image maps.
Full version: jsB@nk » Browser » Popup » DIV Layer Popup onClick
URL: https://www.javascriptbank.com/div-layer-popup-onclick.html
<style type="text/css">/* This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com*/.jsbank_sample_cont {margin: 20px; padding: 20px;}.jsbank_sample_tit {font-weight: bold; margin-bottom: 10px; padding: 5px; width: auto; background-color: #c0c0c0; border: 5px solid #a0a0a0; color: black; text-align: center;}/*Created by: Jeroen Haan Web Site: http://www.haan.net/ */#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;}</style><SCRIPT type=text/javascript><!--// Created by: Jeroen Haan :: http://www.haan.net//* ----------------------------------------------- Floating layer - v.1 (c) 2006 www.haan.net contact: [email protected] 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);//--></SCRIPT><DIV id=layer1><SPAN id=close><A style="TEXT-DECORATION: none" href="javascript:setVisible('layer1')"><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 height=65 src="../image/logojs.gif" width=120 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="../image/logojs.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>