我在< iframe>中显示PDF在按钮点击上使用jQuery模态弹出窗口.除IE10外,所有浏览器都可以正常工作,其中显示的PDF隐藏了模态对话框.
我试过使用z-index.在这个jsfiddle年,模态是在身体之外,但没有任何作用.我可以在弹出窗口中隐藏pdf或更改其位置,但是我的客户不希望这样做.另外我试过var text = prompt(“Alert”,“textBox的内部文本”); – 旧的JavaScript,但客户端不喜欢那种样子.我的TL不想在模态中使用iframe.不管怎样,我可以把HTML放在HTML背后？
HTML：
<body>
<div id='ClickMe'>Click here!</div>
<br/>
<div>This is more than likely an Adobe issue where it thinks it should be in front all the time no matter what,however it is very annoying that you can't open a dialog over a PDF. Click on the 'Click here!' text above to see this issue occur. Interesting enough if you click the Discuss button in JSFiddle it does the same thing.</div>
<br/>
<iframe src="http://www.ccc.commnet.edu/faculty/sfreeman/cst%20250/jQueryNotes.pdf" style="width:100%; height:700px;" frameborder="1"></iframe>
</body>
jQuery的：
var $Dialog_div;
function fnOpenDialog() {
var str = '<div id="dialog" style="display: none;height:60%;" title="On Hold Reason" align="center">'+'<br />'+'<textarea id="messageTextBox" cols="32" rows="3" style="resize:none"></textarea>'+'<div class="row" align="center">'+'<br />'+'</div>'+'<br />'+'</div>';
$Dialog_div = $(str).prependTo('body');
// $Dialog_div = $('<div id=\'ThisDialog\'>Hello</div>').prependTo('body');
$Dialog_div = $('#dialog').dialog({
autoOpen: true,draggable: true,resizable: true,title: 'Dialog',modal: true,stack: true,height: ($(window).height() * 0.95),width: ($(window).width() * 0.9),buttons: {
'Yes': function() {
alert($('#messageTextBox').val());
$Dialog_div.dialog('close');
},'No': function(){
alert('No');
$Dialog_div.dialog('close');
}
}
});
}
$('#ClickMe').click(fnOpenDialog);
如何防止PDF覆盖模态？ (我正在使用ASP.NET MVCC 5(C#))
解决方法
我创建了一个支持IE10及以下版本的解决方案.您可以查看
fiddle here.
该解决方案检测浏览器是否为IE< = 10,并将对话框插入到iframe中,而不是直接进入当前页面,然后通过pdf文档显示.然后,它将关闭对话框的关闭X函数的关闭功能,当对话框关闭时,该函数会删除该框架.
var showDialog = function() {
// Determine the height and width of the dialog
var height = $(window).height() * 0.55;
var width = $(window).width() * 0.75;
var paddedHeight = height + 20;
var paddedWidth = width + 20;
// Template
var dialogTemplate = $("#modalDialogTemplate").html();
var dialog = undefined;
var dialogFrame = undefined;
var resizable = true;
var draggable = true;
// Use a frame if IE <= 10
var agent = navigator.userAgent.toLowerCase();
var useFrame = true;//(agent.indexOf('msie') != -1 && parseFloat(agent.split('msie')[1]) <= 10);
if(useFrame)
{
dialogFrame = $("#dialogFrame").css({
position: "absolute",background: "#efefef",width: paddedWidth + "px",height: paddedHeight + "px",top: "50%",left: "50%",marginLeft: (-1 * (paddedWidth / 2)) + "px",marginTop: (-1 * (paddedHeight/ 2)) + "px",display: "block"
});
// Slight limitation of the frame
resizable = false;
draggable = false;
// Insert the template into the frame
var dialogFrameDoc = dialogFrame[0].contentWindow.document;
dialogFrameDoc.open();
dialogFrameDoc.write(dialogTemplate);
dialogFrameDoc.close();
dialog = dialogFrame.contents().find("#dialog");
} else {
// Use the dialog container
dialog = $("#dialogContainer").html(dialogTemplate).find("#dialog");
}
// Close action
var close = function() {
// Close the dialog
dialog.dialog("close");
dialogFrame.remove();
};
dialog.dialog({
autoOpen: true,draggable: resizable,resizable: draggable,height: height,width: width,buttons: {
'Yes': function() {
alert($('#messageTextBox').val());
close();
},'No': function(){
alert('No');
close();
}
}
});
// Frame dialog fixes
if(useFrame)
{
// Hide the overlay
$(dialogFrameDoc).find(".ui-widget-overlay").hide();
// Position the dialog
$(dialogFrameDoc).find(".ui-dialog").css({ position: "absolute",top: "5px",left: "5px" });
// Setup the close action
$(dialogFrameDoc).find(".ui-dialog-titlebar-close").click(close);
}
};
showDialog();
HTML：
<iframe id="dialogFrame" src="about:blank" style="z-index: 1000; display: none; background: transparent;" frameborder="0" allowTransparency="true"></iframe>
<div id="dialogContainer"></div>
<div id="pdfContainer" style="position: relative; width: 100%; height: 700px;">
<div style="position:absolute;z-index: 2;height: 100%; width: 100%">
<object data="http://www.ccc.commnet.edu/faculty/sfreeman/cst%20250/jQueryNotes.pdf" type="application/pdf" style="width: 100%; height: 100%; z-index=1"></object>
</div>
</div>
<script type="text/template" id="modalDialogTemplate">
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<div id="dialog" style="display:none; height:60%;" title="On Hold Reason" align="center">
<br /><textarea id="messageTextBox" cols="32" rows="3" style="resize:none"></textarea>
<div class="row" align="center"><br /></div><br />
</div>
</script>
上面有对话框的Internet Explorer 9 PDF：
带有对话框的Internet Explorer 10 PDF：
