I have this test page with a popup div.
I want to make the page so that when you click the link the div pops up just under the link, over the other text, and when it is hidden it doesnt move any of the elements on the page, but I dont want to use any measurements or absolute positioning. Can this be done?
Thanks in advance.
I want to make the page so that when you click the link the div pops up just under the link, over the other text, and when it is hidden it doesnt move any of the elements on the page, but I dont want to use any measurements or absolute positioning. Can this be done?
Code:
<html>
<head>
<title>Test Popup</title>
<style>
body,td,p,br
{
color: #000099;
font-family: Verdana,
Geneva,
Arial,
Helvetica,
sans-serif;
font-size: 11px;
font-style: normal;
font-variant: normal;
font-weight: normal;
text-decoration: none;
}
a,a:link,a:visited
{
color: #990000;
text-decoration: none;
}
a:active,a:hover
{
color: #009900;
text-decoration: underline;
}
#popupdiv
{
background-color: #efefef;
border: 1px solid #cccccc;
float: left;
padding: 5px;
visibility: hidden;
z-index: 100;
}
</style>
<script>
function togglePOP(doAction,layerID)
{
if(doAction=='show')
{
document.getElementById(layerID).style.visibility='visible';
}
else
{
document.getElementById(layerID).style.visibility='hidden';
}
}
</script>
</head>
<body>
<center>
text text text text text text text text text text text text text text text text text
<br>
text text text text text text text text text text text text text text text text text
<br>
text text text text text text text
<a href="javascript:togglePOP('show','popupdiv');">link</a>
<div id="popupdiv">this is the popup division <a href="javascript:togglePOP('hide','popupdiv')">close</a></div>
text text text text text text text text text
<br>
text text text text text text text text text text text text text text text text text
<br>
text text text text text text text text text text text text text text text text text
</center>
</body>
</html>
Thanks in advance.