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.
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 tag.
This link uses the onclick event handler.
Write this script code in <head></head>
<script type="text/javascript">
<!--
x = 20;
y = 20;
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>
<style type="text/css">
<!--
#layer1 {
position: absolute;
visibility: hidden;
width: 400px;
height: 300px;
left: 20px;
top: 20px;
background-color: #ccc;
border: 1px solid #000;
padding: 10px;
}
#close {
float: right;
}
-->
</style>
And body part will be consists of following code..
<div id="layer1">
<span id="close"><a href="javascript:setVisible('layer1')"><strong>Hide</strong></a></span>
POP UP Div Layer..
<p>Visit My Blog : http://www.freekatta.blogspot.in/</p>
</div>
<p>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.</p>
<p>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.</p>
<p>The first layer should be place right after the <body> tag.</p>
<p>This link uses the onclick event handler.</p>
<p><a href="#" onclick="setVisible('layer1');return false" target="_self">Show</a></p>
<hr />
<p>This next one uses the javascript link inside the href tag.</p>
<p> <a href="javascript:setVisible('layer1',true)">Show</a></p>
<hr />
<p>The word HAAN contains the link</p>
<p><img src="../images/haan.gif" width="200" height="41" border="0" usemap="#Map" />
</p>
<hr />
<p>
<map name="Map" id="Map">
<area shape="rect" coords="4,4,151,40" href="#" onclick="setVisible('layer1');return false" target="_self" />
</map>
And this one uses the input button inside a form tag. </p>
<form>
<input type="button" value="Show" onclick="setVisible('layer1')" />
</form>
Happy Coding....
No comments:
Post a Comment