All geek questions in one place

CSS hover menu appears behind pdf iframe

I am working on a web application that has a menu at the top of each page with additional menus that drop out when a menu item freezes. This works fine except for one page where we are trying to show pdf in an iframe. In this case, all the hanging menus end with an iframe. I tried setting up the z-index of both the hover menu and iframe, but none of them work. This is happening both in FireFox 3.5 and in IE8 so far.

There are two ways to solve my question. I can either find a way to fine-tune CSS so that my menu appears before the iframe, or if there is another way to show pdf that does not have this problem, I could do it too.

Thanks!

+3
source share
4 answers

When I ran into this problem, I used jQuery to detach the iframe before showing the overlay (and in my case also modal). After the user was executed using modal / overlay, I again bound the iframe to the DOM. _viewerFrameand _viewerDiv- these, of course, are just some css selectors. In my case, there was a div tag around the iframe 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, { ...

Hope this helps ...

0
source

, , , PDF , -. CSS , CSS , -. Google , PDF HTML , z-, , , , PDF. - PDF z- ( , Adobe, Foxit ), .

0

position:relative z-index, iframe.

0

Are you showing pdf file in iframe? I assume he has some kind of flash viewer? If so, make sure that you correctly installed the wmode code to insert Flash.

http://kb2.adobe.com/cps/155/tn_15523.html

0
source

Source: https://habr.com/ru/post/1722161/

More articles:


All Articles