C# · 12月 30, 2021

c# – PDF在IE中隐藏Jquery Modal

我在< iframe>中显示PDF在按钮点击上使用jQuery模态弹出窗口.除IE10外,所有浏览器都可以正常工作,其中显示的PDF隐藏了模态对话框.

删除IE10支持不是一个选项.

我试过使用z-index.在这个jsfiddle年,模态是在身体之外,但没有任何作用.我可以在弹出窗口中隐藏pdf或更改其位置,但是我的客户不希望这样做.另外我试过var text = prompt(“Alert”,“text@R_29_2419@的内部文本”); – 旧的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=”messageText@R_29_2419@” 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($(‘#messageText@R_29_2419@’).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($(‘#messageText@R_29_2419@’).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=”messageText@R_29_2419@” 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: