Onclick Popup - Need help centering it

Hey!

First post here, I need some serious help :slight_smile:

I have a div popup on my test site and i’m having trouble
centering it. For some reason (which probably has everything to
do with the code) the pop up shows in the middle of the page,
as opposed to the middle of the screen. Forcing people to scroll
down to see it.

You can check it out here: Test page

Is there any way I can code it to where it always shows in a visible
position?

Here’s my javascript code:

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 blanket_size(popUpDivVar) {
    if (typeof window.innerWidth != 'undefined') {
        viewportheight = window.innerHeight;
    } else {
        viewportheight = document.documentElement.clientHeight;
    }
    if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) {
        blanket_height = viewportheight;
    } else {
        if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) {
            blanket_height = document.body.parentNode.clientHeight;
        } else {
            blanket_height = document.body.parentNode.scrollHeight;
        }
    }
    var blanket = document.getElementById('blanket');
    blanket.style.height = blanket_height + 'px';
    var popUpDiv = document.getElementById(popUpDivVar);
    popUpDiv_height=blanket_height/2-150;//150 is half popup's height
    popUpDiv.style.top = popUpDiv_height + 'px';
}
function window_pos(popUpDivVar) {
    if (typeof window.innerWidth != 'undefined') {
        viewportwidth = window.innerHeight;
    } else {
        viewportwidth = document.documentElement.clientHeight;
    }
    if ((viewportwidth > document.body.parentNode.scrollWidth) && (viewportwidth > document.body.parentNode.clientWidth)) {
        window_width = viewportwidth;
    } else {
        if (document.body.parentNode.clientWidth > document.body.parentNode.scrollWidth) {
            window_width = document.body.parentNode.clientWidth;
        } else {
            window_width = document.body.parentNode.scrollWidth;
        }
    }
    var popUpDiv = document.getElementById(popUpDivVar);
    window_width=window_width/2-150;//150 is half popup's width
    popUpDiv.style.left = window_width + 'px';
}
function popup(windowname) {
    blanket_size(windowname);
    window_pos(windowname);
    toggle('blanket');
    toggle(windowname);        
}

And here’s the html:

<div id="blanket" style="display:none;"></div>
<div id="popUpDiv" style="display:none;">
<a href="#" onclick="popup('popUpDiv')">Click Me To Close</a>
test
</div>
<a href="#" onclick="popup('popUpDiv')">Click Here To Open The Pop Up</a>

This is a more simple way to do it:

function pop(url){
var width = 1020;
var height = 600;
var left = (screen.width - width) / 2;
var top = ((screen.height - height) / 2) * .5;
window.open(url, ‘window’, ‘status=no, directories=no, menubar=no, resizable=yes, scrollbars=yes, toolbar=no, location=no, width=’ + width + ‘, height=’ + height + ‘, top=’ + top + ‘, left=’ + left);
}

Hey, thanks for your help… But that code doesn’t look like it’s going to popup a div.
Reason I want to do it this way is so I can customize the popup and embed a contact
form inside it.

So what i’m looking to do is center the div on the screen.

Aaah. Well, you should be able to center it with css then.

this is the part of the code that is putting it in the middle of the page.

popUpDiv.style.top = popUpDiv_height + ‘px’;

I did not really look into it to see what the code is doing but I did delete it and add this to the css …

#popUpDiv {
top:50px; <–add here
position:absolute;
background-color:#eeeeee;
width:300px;
height:300px;
z-index: 9002;
}

and the popup was nolonger in the center.