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

问题描述

我正在使用一个Web应用程序，其中每个页面顶部都有一个菜单，子菜单在菜单项悬停时下拉。这工作正常，除了在一个页面上，我们试图在iframe中显示一个pdf。在这种情况下，悬停菜单都会在iframe后面。我试图调整悬浮菜单和iframe的z索引，但似乎都不工作。这是发生在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, { ...

希望有助于...

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