jquery - Bootstrap模式弹出广告将成为iframe的顶峰

我有一个包含一个iframe的应用程序，该iframe可以在单击按钮时打开引导模式弹出窗口，我面临的问题是弹出窗口粘在iframe容器的顶部，而不是相对于打开它的元素，即模式将iframe应用程序独立打开时，弹出窗口效果很好。我在用


  iframe调整大小


jQuery库也可以调整iframe的大小。

最佳答案

我使用windows.postMessage（）和window.addEventListener（）功能修复了该问题，并使用以下代码在父应用程序上计算了topoffset和当前滚动位置：

  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, '*');
  });

在下面的代码中使用的Iframe应用程序中，获取这些值并使用它们将填充设置为可点击按钮上打开的模式弹出框：

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

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

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

    });