Menu
Hi,
I am a js newbie, after some research (btw: thanks to every of the authors od the original code) I’ve copied and customized a script to display a css popup in my little website.
The script should display a popup in the middle of the browser window, graying out the background,
Everything seems to work fine except that at the end of the script, the page is displayed from the top. This means that if you click on the popup link from a position down in the page, you’ll miss it because you will be taken to the top of the page, where you can’t see it.
Please try it, this is the HTML and CSS code:
[code=html]
<html>
<head>
<title>Test page</title>
<style type=”text/css”>
#blanket {
background-color:#111;
opacity: 0.65;
filter:alpha(opacity=65);
position:absolute;
z-index: 100;
top:0px;
left:0px;
width:100%;
}
.popup {
position:absolute;
background-color:#ff0000;
width:600px;
height:474px;
z-index: 200;
}
#closePopup {
background-color:#ff00000;
width:48px;
height:48px;
z-index:300;
float:right;
}
</style>
<script type=”text/javascript” src=”invent.js”></script>
</head>
<body>
<div id=”blanket” style=”display:none;”> <!– dark background –>
</div>
<div id=”block” style=”width:100%;height:1800px;”><p>top of the page</p></div>
<div id=”block” style=”width:100%;height:1800px;”><p><a href=”#” onclick=”popup(‘test’)”>Open popup</a></p><p>after you click scroll down here again to see the popup</p></div>
<p>bottom of the page</p>
<div id=”test” class=”popup” style=”display:none;”> <!– popup–>
<div id=”closePopup” style=”margin:-24px;z-index:4;”>
<a href=”#” onclick=”popup(‘test’)”>x</a>
</div>
<p>Hello!</p>
</div>
</body>
</html>
… and the js:
[CODE]function popup(windowname) {
document.getElementById(‘blanket’).style.height = document.getElementsByTagName(‘body’)[0].scrollHeight + ‘px’; // blanket 100% page length
viewportPos(windowname);
toggle(‘blanket’);
toggle(windowname);
}
// looks for the position where the popup must be rendered
function viewportPos(popUpDivVar) {
xPos = f_clientWidth()/2-300;//300 is half popup’s width
document.getElementById(popUpDivVar).style.left = xPos + ‘px’;
yPos = f_clientHeight()/2-237;//237 is half popup’s height
document.getElementById(popUpDivVar).style.top = yPos + f_scrollTop() + ‘px’;
}
//hides or displays the popup
function toggle(div_id) {
var el = document.getElementById(div_id);
if ( el.style.display == ‘none’ ) { el.style.display = ‘block’;}
else {el.style.display = ‘none’;}
}
function f_scrollTop() {
return f_filterResults (
window.pageYOffset ? window.pageYOffset : 0,
document.documentElement ? document.documentElement.scrollTop : 0,
document.body ? document.body.scrollTop : 0
);
}
function f_clientWidth() {
return f_filterResults (
window.innerWidth ? window.innerWidth : 0,
document.documentElement ? document.documentElement.clientWidth : 0,
document.body ? document.body.clientWidth : 0
);
}
function f_clientHeight() {
return f_filterResults (
window.innerHeight ? window.innerHeight : 0,
document.documentElement ? document.documentElement.clientHeight : 0,
document.body ? document.body.clientHeight : 0
);
}
function f_filterResults(n_win, n_docel, n_body) {
var n_result = n_win ? n_win : 0;
if (n_docel && (!n_result || (n_result > n_docel)))
n_result = n_docel;
return n_body && (!n_result || (n_result > n_body)) ? n_body : n_result;
}
I’ve been debugging with alert boxes and everything seems to be fine until the script ends execution. Then the user is brought again at the top of the page…
In my final site the only thing I would like to show in the popup is a Flash movie.
Do you know any workaround? I would even implement a completely different solution if I knew which…
By the way: At this stage I am using Chrome but I would like my solution to work in any browser, that will the next issue.
Thank you in advance!