Bootstrap 模态弹出框位于 Iframe 顶部

Question

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

Iframe resizer

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

Answer 1

我使用 windows.postMessage() 和 window.addEventListener() 功能修复了它，我使用以下代码计算了父应用程序的顶部偏移量和当前滚动位置：

  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);

    });

Bootstrap 模态弹出框位于 Iframe 顶部

Bootstrap modal pop is going top of Iframe

jquery

css

iframe

bootstrap-modal

iframe-resizer