出现在 pdf iframe 后面的 CSS 悬停菜单 [英] CSS hover menu appearing behind pdf iframe

问题描述

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

I am working on a web application that has a menu across the top of every page with sub menus that drop down when a menu item is hovered over. This works fine, except on one page where we are trying to show a pdf in an iframe. The hover menus all end up behind the iframe in this one case. I have tried adjusting the z-index of both the hover menu and the iframe but neither seems to work. This is occurring in both FireFox 3.5 and IE8 so far.

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

There are two ways my question could be solved. I can either find a way to accurately adjust the CSS so my menu appears in front of the iframe or if there is another way to show the pdf that doesn't have this issue I could do that too.

谢谢！

推荐答案

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

When I ran into this issue, I used jQuery to detach the iframe before showing the overlay (and in my case a modal too). Once the user was done with the modal/overlay, I reattached the iframe to the DOM. _viewerFrame and _viewerDiv are just some css selectors of course. In my case there was a wrapping div tag around the iframe element that made detaching and attaching easy.

// 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, { ...

希望有帮助...

这篇关于出现在 pdf iframe 后面的 CSS 悬停菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！