Bootstrap modal pop is going top of Iframe

I have an app which contains an iframe which open the bootstrap modal pop up on click of a button, the problem which I am facing is that pop-up stick to the top of iframe container and not relative to element which opens it, the modal pop up works fine when I open it iframe app as standalone. I am using

Iframe resizer

jquery library to resize the Iframe too.

I fixed it by using the windows.postMessage() and window.addEventListener() features, i calculated the topoffset and current scroll position on parent application using below code:

  window.addEventListener('scroll', function (event) {
        var myIframe = document.querySelector('#wizardIframe');
       var topOffset = myIframe.getBoundingClientRect().top + window.scrollY;
     var currentScroll = document.scrollingElement.scrollTop;
      myIframe.contentWindow.postMessage(topOffset + ':' + currentScroll, '*');
  });

In Iframe application used below code to get these values and use them to set the padding to modal pop up on click on button which opens it :

 window.addEventListener('message', function (event) {

        var messageContent = event.data.split(':');
        var topOffset = messageContent[0];
        var currentScroll = messageContent[1];

        $('#topOffset').val(topOffset);
        $('#currentScroll').val(currentScroll);

    });