Bootstrap modal popup ignores scroll position if in iframe

Question

I have a bootstrap modal popup that works great if the webpage is not in an iframe, like so:

https://jgroups-dev.herokuapp.com/ (click Find a Group, then click a Email button)

However, when it is within an iframe the modal popup anchors to the top of the iframe, completely ignoring the user's scroll position:

http://www.yourjourney.tv/connect/j-group-catalogue/

To try to hack around this issue, I'm attempting to manually set the modal popup's top property based on the scroll position within the iframe, however $(window).scrollTop() and other variants are all returning either 0 or 40 from within the iframe.

$('.send-email-modal').modal();

            setTimeout(function () {
                if(inIframe()) {
                    var emailModal = $('.send-email-modal .modal-dialog');
                    var win = $(window);
                    var offset1 = win.scrollTop();
                    var offset2 = document.documentElement.scrollTop || document.body.scrollTop;
                    console.log('offset1: ' + offset1);
                    console.log('offset2: ' + offset2);
                    var positionWindow = (offset1 + (win.height() / 2)) - (emailModal.height() / 2);
                    console.log('win.height(): ' + win.height());
                    console.log('emailModal.height(): ' + emailModal.height());
                    console.log('positionWindow: ' + positionWindow);
                    emailModal.css({ 'top': positionWindow });
                }
            }, 500);

Here is the console output:

offset1: 40
main.js:54 offset2: 40
main.js:56 win.height(): 27037
main.js:58 emailModal.height(): 426
main.js:59 positionWindow: 13345.5

If I can't retrieve how far down the user has scrolled in the iframe from code within the iframe, then I have no chance of being able to position the bootstrap modal popup correctly. Help very much appreciated, I've run into a brick wall on this one...

Answer 1

Possible issue: It is not ignoring the scroll value. The user scroll is taking place in the parent window. Your iframe's height is probably equal to it's document height. Modal is always place on the top center (with some margin) of the containing window(in this case your iframe). and hence it works fine when you see it in stand alone window. And it's near the starting of the document inside the iframe.

Possible Solution [in case of same origin] From inside your iframe, check if the page has a parent window (to ensure it is inside a iframe) and if it has read the value of the scrollTop and then manually adjust the modal css top property.

parent == self // for any top level window

Following will give you the scroll top of the parent window

parent.document.body.scrollTop

In case of cross origin In case of different origins of iframe and the parent, you will not be able to access the parent's properties. Try using the postMessage. send the value of scrollTop from parent to the iframe wherever user scrolls. Save this value and use it whenever you show the modal.

Read more about postMessage here https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage