PDF in iFrame overlaps jQuery dialog box, z-index not working

Question

I tried many option to fix the z-index issue of PDF iFrame overlapping jQuery Dialog box, but still its not working.

similar to "Iframe issue when i open pdf dialog box goes behind pdf" issue, I am having the same issue in IE, here is the screenshot of my issue:

enter image description here

Below is the jQuery code of which generates the dialog box:-

           $("#cancelSessionButton").click(function () {
                $("#sessionReason").dialog("open");
                $("#pdf").hide();
            });


            $("#sessionReason").dialog({
                autoOpen: false,
                modal: true,
                buttons: {
                    "Submit": function () {
                        .......

                    },
                    "Cancel": function () {
                        $(this).dialog("close");
                        $("#pdf").show();
                    }
                }
            });

            $("#cancelSessionButton").click(function () {
                $("#sessionReason").dialog("open");
                $("#pdf").hide();
            });

Here is the HTML from which the iFrame is generating:

          <div id="pdf">

            <iframe id="pdfIframe" name="pdfIframe" src="pdf.html" style="width: 100%; height: 100%;" scrolling="auto" frameborder="1">
                 Your browser doesn't support inline frames.
            </iframe>
        </div>

PDF.html code:

<body>
    <object data="lorem.pdf" type="application/pdf">
        <p>It appears you don't have Adobe Reader or PDF support in this web browser.
            <br/>
            <a href="lorem.pdf">Click here to download the PDF</a> OR <a href="http://get.adobe.com/reader/" target="_blank">Click here to install Adobe Reader</a></p>
        <embed id="pdfDocument" src="lorem.pdf" type="application/pdf" />
   </object>
</body>

let me know if you need any other information.

Please suggest!!

I'm not sure if it's possible to display a simple div over a PDF viewer in IE, however, maybe You can do some kind of workaround (like hiding the pdf viewer when the dialog box is shown). — Lukasz M, Feb 03 '14 at 22:07
as an alternate m doing that only... showing and hiding pdf based on dialog box open and close — UID, Feb 03 '14 at 22:13
yeah... but still wanted to check if there is any solution for the same.. just in case my workaround is not acceptable.. you see ;-) — UID, Feb 03 '14 at 22:20
I see. There is a kind of workaround described here: http://stackoverflow.com/a/711888/232530, but it's rather for masking the pdf than for displaying something above it. — Lukasz M, Feb 03 '14 at 22:24

score 1 · Answer 1 · answered Oct 29 '18 at 13:59

There is a solution by using an iframe hack (see this question for the explanation of the hack: z-index does not work in Internet Explorer with pdf in iframe).

Since JQuery 1.9, you can extend the JQuery ui.dialog component. The solution is to add an iframe to the .ui-dialog DOM element. You can do this way:

$.widget( "ui.dialog", $.ui.dialog, {
    _parentInit: $.ui.dialog.prototype._init,

    _init: function() {
        this._parentInit();

        $("<iframe src=\"about:blank\" frameborder=\"0\" style=\"position:absolute; top:0;left:0; width:100%;height:100%;z-index:-1;\"></iframe>").appendTo(this.element.parent());
    }
});

The Javascript code must be executed before initializing any dialog. It means, it should be in the head part and should not wait on the DOM readiness.

Every JQuery dialog will have the iframe added automatically which solves the layering problem with Adobe Plugin in IE. I tested the solution with IE11.

PDF in iFrame overlaps jQuery dialog box, z-index not working

1 Answers1