This JavaScript helps you open floating layer popups. The layers alway stay on top, allowing your visitors to work in the main detail at JavaScriptBank.com - 2.000+ free JavaScript codes
How to setup
Step 1: Place CSS below in your HEAD section
CSS
Step 2: Place JavaScript below in your HEAD section
JavaScript
Step 3: Place HTML below in your BODY section
HTML
How to setup
Step 1: Place CSS below in your HEAD section
CSS
Codice:
<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>
Step 2: Place JavaScript below in your HEAD section
JavaScript
Codice:
<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>
Step 3: Place HTML below in your BODY section
HTML
Codice:
<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>