PDF隐藏了IE中的Jquery Modal
Dhw*_*ani 11 html javascript c# jquery internet-explorer
我<iframe>在按钮单击时使用jQuery模式弹出窗口显示PDF .这在除IE10之外的所有浏览器中都可以正常工作,其中显示的PDF隐藏了模式对话框.
删除IE10支持不是一种选择.
我尝试使用z-index.在这个jsfiddle,模态是在身体之外,但没有任何作用.我可以在弹出窗口中隐藏pdf或更改它的位置,但我的客户端不希望这样.我也试过var text = prompt("Alert", "textbox's intial text");- 旧的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及以下版本的解决方案.你可以在这里查看小提琴.
该解决方案检测浏览器是否为IE <= 10并将对话框插入iframe - 而不是直接插入当前页面 - 然后显示在pdf文档上.然后它将一个close函数连接到对话框的现有close 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,
title: 'Dialog',
modal: true,
stack: true,
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>
带有PDF对话框的Internet Explorer 9:
带有PDF对话框的Internet Explorer 10:
| 归档时间： |
|
| 查看次数： |
3634 次 |
| 最近记录： |