z-index does not work in Internet Explorer with pdf in iframe

Question

I cannot get z-index working on a iframe that contains a pdf file with IE8. It works with Google Chrome.

Example (JSFiddle):

Answer 1

For those who are using jQueryUI, I came up with the following solution.

Add the following function and call it from the open event of your dialogs. If your browser is IE it will insert an iFrame into the Modal overlay or else add it to the dialog background.

// Simple IE Detection.
var isIE = Object.hasOwnProperty.call(window, "ActiveXObject");

// Fix IE bug where an iFrame from below will cover a dialogs contents.
function dialogIFrameFix(event /* object */) {
    setTimeout(function () {
        if (event && event.target && isIE) {
            var $dialog = $(event.target.parentElement);
            // Get the modal overlay if found.
            var $fixTarget = $dialog.next('.ui-widget-overlay');
            // Use the dialog body if there is no overlay.
            if (!$fixTarget || !$fixTarget.length)
                $fixTarget = $dialog;
            // Add as first child so it is covered by all of the other elements
            $fixTarget.prepend('');
        }
    }, 10);
}

You would then call it as follows..

.dialog({
    open: function (event, ui) {
        dialogIFrameFix(event);
    }
});