我尝试了很多选项来修复 PDF iFrame 与 jQuery 对话框重叠的 z-index 问题，但仍然无法正常工作。
类似于“Iframe issue when i open pdf dialog box goes behind pdf”问题， 我在 IE 中遇到了同样的问题，这是我的问题的屏幕截图:
下面是生成对话框的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>
如果您需要任何其他信息，请告诉我。
请推荐!!
最佳答案
有一个使用 iframe hack 的解决方案(有关 hack 的解释，请参阅此问题:z-index does not work in Internet Explorer with pdf in iframe)。
从 JQuery 1.9 开始，您可以扩展 JQuery ui.dialog 组件。解决方案是将 iframe 添加到 .ui-dialog DOM 元素。你可以这样做:
$.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 测试了该解决方案。
关于javascript - iFrame 中的 PDF 与 jQuery 对话框重叠，z-index 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21536430/