PDF隐藏jQuery的模态在IE浏览器 [英] PDF hide Jquery Modal in IE
本文介绍了PDF隐藏jQuery的模态在IE浏览器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我显示在℃的PDF; IFRAME>使用按钮点击一个jQuery模式弹出。这是除了IE10，其中显示PDF隐藏模式对话框所有的浏览器工作正常。
滴IE10支持是不是一种选择。
我试图用的z-index。在此的jsfiddle 时，模态是身体的外面，但没有任何工程。我可以隐藏在弹出的PDF或改变它的位置，但我的客户不希望这样。此外，我试过 VAR文本=提示（警报，文本框的文本intial）; - 旧的javascript，但客户不喜欢那个样子。 ？我的TL不想模态转为使用iframe 是不是反正我可以把背后PDF HTML
HTML：
<身体GT;
< DIV ID ='ClickMe'>点击此处<！/ DIV>
< BR />
< DIV>这是极有可能一个Adobe问题，即它认为它应该是在前面所有的时间无论什么更多的，但它是很烦人，你不能在一个PDF打开一个对话框。点击点击这里！的文字上面看到这个问题发生。有趣的足够如果您单击讨论按钮的jsfiddle它做同样的事情< / DIV>
< BR />
< IFRAME SRC =http://www.ccc.commnet.edu/faculty/sfreeman/cst%20250/jQueryNotes.pdf的风格=宽度：100％;高度：700像素; FRAMEBORDER =1>&下; / iframe的>
< /身体GT;
jQuery的：
变量$ Dialog_div;
功能fnOpenDialog（）{
无功海峡='< DIV ID =对话的风格=显示：无;身高：60％;标题=在保持理性ALIGN =中心>'+'< BR />'+'< textarea的ID =messageTextBoxCOLS =32行=3的风格=调整大小：无>< / textarea的>'+'< DIV CLASS =行ALIGN =中心>'+'< BR />'+'< / DIV>'+'< BR / >'+'< / DIV>';
$ Dialog_div = $（STR）.prependTo（'身体'）;
$ // = Dialog_div $（'< DIV ID = \'ThisDialog\'>您好< / DIV>'）。prependTo（'身体'）;
$ Dialog_div = $（'＃对话）对话框（{
的AutoOpen：真的，
可拖动：真的，
可调整大小：真的，
标题：'对话'，
模式：真，
堆栈：真的，
高度：（$（窗口）.height（）* 0.95），
宽度：（$（窗口）.WIDTH（）* 0.9），
键：{
是：函数（）{
警报（$（'＃messageTextBox）VAL（） ）;
$ Dialog_div.dialog（'接近'）;
}，
'不'：函数（）{
警报（'无'）;
$ Dialog_div.dialog（'接近'）;
}
}
}）;
}
$（'＃ClickMe）点击（fnOpenDialog）。
我如何防止覆盖模式的PDF？ （我用ASP.NET MVCC 5（C＃））
解决方案
我已经创建了一个支持IE10及以下的解决方案。你可以在这里查看小提琴。
解决方案检测如果浏览器是IE< = 10，并插入对话框到iframe - 而不是直接到当前页面 - 这是然后在PDF文档中显示。然后，它钩住了一个贴心的功能，以现有的密切的 X 的对话框，从而消除当对话框关闭帧功能。
<预类= 郎咸平-JS prettyprint-覆盖>
VAR的ShowDialog =函数（）{
//确定对话框
VAR高度的高度和宽度= $（窗口）.height（）* 0.55;
变种宽度= $（窗口）.WIDTH（）* 0.75;
VAR paddedHeight =身高+ 20;
VAR paddedWidth =宽度+ 20;
//模板
变种dialogTemplate = $（＃modalDialogTemplate）HTML（）;
VAR对话框=不确定;
VAR dialogFrame =不确定;
无功调整大小=真;
VAR拖动= TRUE;
//使用框架，如果IE< = 10
VAR剂= navigator.userAgent.toLowerCase（）;
变种useFrame =真; //（agent.indexOf（'MSIE'）= -1&放大器;！&放大器; parseFloat（agent.split（'MSIE'）[1]）&下; = 10）;
如果（useFrame）
{
dialogFrame = $（＃dialogFrame），CSS（{
位置：绝对，
背景： #EFEFEF，
宽度：paddedWidth +PX，
高度：paddedHeight +PX，
前：50％，
左：50％ ，
marginLeft：（-1 *（paddedWidth / 2））+PX，
marginTop：（-1 *（paddedHeight / 2））+PX，
显示：块
}）;框架
的
//轻微限制可调整大小= FALSE;
拖动= FALSE;
//将模板放到框
VAR dialogFrameDoc = dialogFrame [0] .contentWindow.document;
dialogFrameDoc.open（）;
dialogFrameDoc.write（dialogTemplate）;
dialogFrameDoc.close（）;
=对话框dialogFrame.contents（）找到（＃对话）;
}其他{
//使用对话框容器
=对话框$（＃dialogContainer）HTML（dialogTemplate）.find（＃对话）;
}
//关闭行动
VAR接近=函数（）{
//关闭对话框
dialog.dialog（亲密）;
dialogFrame.remove（）;
};
dialog.dialog（{
的AutoOpen：真的，
可拖动：调整大小，
可调整大小：拖动，
标题：'对话'，
模式：真，
堆栈：真的，
身高：身高，
宽度：宽度，
键：{
是：函数（）{
警报（$（'＃messageTextBox）VAL（））;
接近（）;
}，
'不'：函数（）{
警报（'无'）;
接近（）;
}
}
}）;
//框架对话框修复
如果（useFrame）
{
//隐藏覆盖
$（dialogFrameDoc）.find（用户界面 - 小窗口叠加）隐藏（）。
//位置的对话框
$（dialogFrameDoc）.find（UI-对话）的CSS（{位置：绝对，上面：5像素，左 5像素}）;
//设置关闭操作
$（dialogFrameDoc）.find（UI-对话框的标题栏 - 关闭。）点击（关闭）。
}
};
的ShowDialog（）;
的HTML：
<预类=郎-html prettyprint-覆盖>
< IFRAME ID =dialogFrameSRC =有关：空白的风格=的z-index：1000;显示：无;背景：透明; FRAMEBORDER =0ALLOWTRANSPARENCY =真>&下; / iframe的>
< DIV ID =dialogContainer>< / DIV>
< DIV ID =pdfContainer的风格=的位置是：相对;宽度：100％;高度：700像素;>
< DIV的风格=的位置是：绝对的; z-index的：2;高度：100％;宽度：100％>
<对象数据=http://www.ccc.commnet.edu/faculty/sfreeman/cst%20250/jQueryNotes.pdf类型=应用/ PDF的风格=宽度：100％;高度：100％; z索引= 1>&下; /对象>
< / DIV>
< / DIV>
<脚本类型=文/模板ID =modalDialogTemplate>
<链接rel =stylesheet属性HREF =// ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css/>
< DIV ID =对话的风格=显示：无;身高：60％;标题=在保持理性ALIGN =中心>
< BR />< textarea的ID =messageTextBoxCOLS =32行=3的风格=调整大小：无>< / textarea的>
< DIV CLASS =行ALIGN =中心>< BR />< / DIV>< BR />
< / DIV>
< / SCRIPT>
Internet Explorer 9的上面PDF对话框：
Internet Explorer的10与对话以上PDF：
I am displaying a PDF in an <iframe> using a jQuery modal popup on button click. This is works fine in all browsers except IE10, where the displayed PDF hides the modal dialog.
Dropping IE10 support is not an option.
I tried using z-index. In this jsfiddle, the modal is outside of the body but nothing works. I could hide the pdf on popup or change the position of it, but my client don't want that. Also I tried var text = prompt("Alert", "textbox's intial text"); - old javascript, but client don't like that look. My TL don't want to use iframe in modal. Isn't anyway I can take pdf behind 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);
How can I prevent the PDF from covering the modal? (I am using ASP.NET MVCC 5(C#))
解决方案
I have created a solution that supports IE10 and below. You can view the fiddle here.
The solution detects if the browser is IE <= 10 and inserts the dialog into an iframe - rather than directly into the current page - which is then displayed over the pdf document. It then hooks up a close function to the existing close X function of the dialog, which removes the frame when the dialog is closed.
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();
The 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 with dialog above PDF:
Internet Explorer 10 with dialog above PDF:
这篇关于PDF隐藏jQuery的模态在IE浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
