jquery - Bootstrap modal pop 将成为 iframe 的顶部

Question

我有一个包含 iframe 的应用程序，它在单击按钮时打开引导模式弹出窗口，我面临的问题是弹出窗口粘在 iframe 容器的顶部，而不是相对于打开它的元素，模式当我将 iframe 应用程序作为独立打开时，弹出窗口工作正常。我在用

iframe 调整大小

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

Answer 1

我通过使用 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);

    });