I use a script for a popup. This works great, but when the popup comes foreward, the background jumps to the top position. That is not what I want. The background page is large and de popup is only for aditional information. When the visitor clicks it away,
he must can continue where he left. How can I fix this? What element in the script is responsible for repositioning the background?
cartesius
Member
2 Points
2 Posts
How to fix background positioning problem?
Mar 01, 2012 03:56 PM|LINK
Hi,
I use a script for a popup. This works great, but when the popup comes foreward, the background jumps to the top position. That is not what I want. The background page is large and de popup is only for aditional information. When the visitor clicks it away, he must can continue where he left. How can I fix this? What element in the script is responsible for repositioning the background?
</script>
<script type="text/javascript">
function showPopUp(el) {
var cvr = document.getElementById("cover")
var dlg = document.getElementById(el)
cvr.style.display = "block"
dlg.style.display = "block"
if (document.body.style.overflow = "hidden") {
cvr.style.width = "1024"
cvr.style.height = "100%"
}
}
function closePopUp(el) {
var cvr = document.getElementById("cover")
var dlg = document.getElementById(el)
cvr.style.display = "none"
dlg.style.display = "none"
document.body.style.overflowY = "scroll"
}
</script>
<style type="text/css">
#cover {
display:none;
position:absolute;
left:0px;
top:0px;
width:100%;
height:100%;
background:gray;
filter:alpha(Opacity=80);
opacity:0.5;
-moz-opacity:0.5;
-khtml-opacity:0.5
}
#dialog {
display:none;
left:100px;
top:50px;
width:680px;
height:700px;
position:absolute;
z-index:1000;
background:white;
padding:0px;
font:10pt verdana;
border:0px solid gray
}
</style>
</head>
<div id="cover"></div>
<div id="dialog">
<iframe width="680" height="700" src="#" frameborder="0" scrolling="no"></iframe>
<br><a href="#" onclick="closePopUp('dialog');"><input type="button" value="close" /></a></div>
<a href="#" onclick="showPopUp('dialog');" style="text-decoration: none">show popup</a>
CollyMelon
Participant
997 Points
222 Posts
Re: How to fix background positioning problem?
Mar 01, 2012 04:09 PM|LINK
Well I pasted your code and I can't reproduce the issue you're getting.
Eitherway try returning false when firing the javascript:
<a href="#" onclick="closePopUp('dialog');return false"><input type="button" value="close" /></a>
<a href="#" onclick="showPopUp('dialog');return false" style="text-decoration: none">show popup</a>
cartesius
Member
2 Points
2 Posts
Re: How to fix background positioning problem?
Mar 01, 2012 05:08 PM|LINK
Thanks CollyMelon,
What now happend is that the baground is blocked and the popup is shown on top at the same place as before...
Is seems that the whole script is related to the absolute 0 of the web page.