Question

我尝试了很多选项来修复PDF iFrame重叠jQuery对话框的z-index问题，但仍然无效。

类似于“Iframe issue when i open pdf dialog box goes behind pdf”问题，我在IE中遇到了同样的问题，这是我的问题的屏幕截图：

enter image description here

以下是生成对话框的jQuery代码： -

           $("#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();
            });

以下是iFrame生成的HTML：

          <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代码：

<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>

如果您需要任何其他信息，请与我们联系。

请建议!!

Answer 1

有一种使用iframe hack的解决方案（有关该hack的说明，请参见此问题：z-index does not work in Internet Explorer with pdf in iframe）。

从JQuery 1.9开始，您可以扩展JQuery ui.dialog组件。解决方案是向iframe DOM元素添加.ui-dialog。您可以这样做：

$.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());
    }
});

必须在初始化任何对话框之前执行Javascript代码。这意味着它应该在head部分中，而不应该等待DOM准备就绪。

每个JQuery对话框都会自动添加iframe，从而解决了IE中Adobe Plugin的分层问题。我使用IE11测试了该解决方案。

iFrame中的PDF重叠jQuery对话框，z-index无法正常工作

1 个答案: