SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Onclick Popup - Need help centering it

    Hey!

    First post here, I need some serious help

    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:
    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:

    Code:
    <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>

  2. #2
    SitePoint Evangelist speda1's Avatar
    Join Date
    Jan 2002
    Posts
    550
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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);
    }

  3. #3
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    SitePoint Evangelist speda1's Avatar
    Join Date
    Jan 2002
    Posts
    550
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Aaah. Well, you should be able to center it with css then.

  5. #5
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •