Vertical centering of modal within very tall iframe

[jaysonhunter]

I have a page with an iframe and the height of this iframe is dynamically set to the height of its content, around 3000px. The modal popup styling and logic is part of the iframe HTML page, not the parent page.

When the modal displays, it's positioned in the center of the tall iframe way down the page out of view.

How do I get it to position properly in the center of the window and not the entire iframe height?

[pomartel]

Did you find a way? I have the same problem.

[jaysonhunter]

Hello Pierre. Yes I did manage to get this working to a degree, although it's not perfect. I'll post a URL to the example in a few days.

[pomartel]

I ended up doing this (coffeescript) :

$('.pictures-gallery').magnificPopup
  callbacks:
    open: resizeThumbnailViewer
    imageLoadComplete: resizeThumbnailViewer

resizeThumbnailViewer = ->
  $('.mfp-wrap').css({top: viewport.scrollTop(), height: viewport.height()})
  $('.mfp-img').css({'max-height': viewport.height()})

So basically, whenever the popup opens or a new image is loaded, I play with some css properties of mfp-wrap and mfp-img to center it properly inside the iframe. Works perfectly!

[jaysonhunter]

Hi Pierre. I used a similar approach to you with this code:

$.magnificPopup.open({ fixedContentPos: true,

            callbacks: {
                beforeOpen: function () {
                     windowHeight = $(window.parent).height();
                     iFrameScrollPos = $(window.parent.document).scrollTop();
            },
                open: function () {
                   $('.mfp-wrap').css({'position': 'absolute', 'top': iFrameScrollPos, 'left': 0, 'height':      windowHeight});
            }

})

[outsight]

Thank you Jayson! I was having the same problem today and your solution saved me hours of frustration.