Centering popup div

  • Been puzzling al morning, but I can’t figure this one out.

    I got a pop-up working on my blog. I wanna use this to popup a bigger version of a picture, which it does.

    If you scroll down to 2, you’ll see that it doesn’t center vertically, what you now see is just an absolute position. How can I make it center horizontally?

    Would be nice if the div would also center horizontally and/or adjust to fit it contents, but that’s just a bonus.

    This is the css for the popup div:

    .endomondo {
visibility: hidden;
background: white;
border-style: solid;
border-width: 1px;
border-color: red;
position: absolute;
top: -178px;
left: -220px;
width: 1200px;
height: 825px;
text-align: center;
}

    Thanks in advance!

Viewing 2 replies - 1 through 2 (of 2 total)

  • The best thing to do is instead of reinventing the wheel, use a popup script such as Fancybox

    If you are stuck on centering the box yourself, you need to do the following:

    calculate the height of the popup:
    var boxHeight = $( '#popup_box' ).height();

    Grab The Height Of The browser window
    var windowHeight = $(window).height();

    Get The Offset You Have To Work With:
    var offset = ( windowHeight - boxHeight ) / 2;

    Set The Popup To Be The Offset Height From The Top Of The Window
    $( '#popup_box' ).css( { 'position' : 'fixed', 'top' : offset + 'px } );

    Resizing the box to fit the content and animate into the center of the screen i have always found to be much more tedious and frustrating than to simply use a prewritten popup script.

    Cheers
    Ben

    Thread Starter erikkok2

    (@erikkok2)

    Great,
    had also been looking for a plugin, but didn’t find any to my liking, but this looks nice.

    Thanks.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Centering popup div’ is closed to new replies.

Tags