WordPress.org

1. erikkok2
   Member
   Posted 4 months ago #

   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!

2. casben79
   Member
   Posted 4 months ago #

   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

3. erikkok2
   Member
   Posted 4 months ago #

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

   Thanks.

Reply

You must log in to post.