CSS悬停菜单出现在pdf iframe后面

Question

我正在开发一个 Web 应用程序，该应用程序在每个页面的顶部都有一个菜单，当将鼠标悬停在菜单项上时，子菜单会下拉。这工作正常，除了在我们试图在 iframe 中显示 pdf 的页面上。在这种情况下，悬停菜单最终都位于 iframe 后面。我尝试调整悬停菜单和 iframe 的 z-index，但似乎都不起作用。到目前为止，这在 FireFox 3.5 和 IE8 中都会发生。

有两种方法可以解决我的问题。我可以找到一种方法来准确调整 CSS，以便我的菜单出现在 iframe 的前面，或者如果有另一种方法来显示没有这个问题的 pdf，我也可以这样做。

谢谢!

Answer 1

当我遇到这个问题时，我使用 jQuery 来分离 iframe，然后再显示叠加层(在我的例子中也是模态)。一旦用户完成了模式/覆盖，我将 iframe 重新附加到 DOM。 _viewerFrame 和 _viewerDiv 当然只是一些 css 选择器。在我的例子中，iframe 元素周围有一个包装 div 标签，这使得分离和附加变得容易。

// detach iframe
_frame = $(_viewerFrame).detach();

function reattach(frame) {
    // append it back to the div it was in (reattaching essentially)
    $(_viewerDiv).append(frame);
    setButtonStates();
    setViewerState();
}

function onOk() {

     ... // other code

     reattach(_frame);
}

function onCancel() {

     ... // other code

     reattach(_frame);
}

// show modal with overlay
Dialog.confirm(onOk, onCancel, { ...

希望对您有所帮助...