logo标签列表

在IE中隐藏Jquery模态框的PDF

c#javascriptjqueryhtmlinternet-explorer
11
我正在使用jQuery模态弹出窗口，在点击按钮时在<iframe>中显示PDF。这在除IE10之外的所有浏览器中都可以正常工作，但在IE10中，显示的PDF会隐藏模态对话框。
放弃对IE10的支持不是一个选项。
我尝试过使用z-index。在这个 jsfiddle中，模态框位于body之外，但仍然无法解决问题。我可以在弹出窗口时隐藏pdf或更改其位置，但我的客户不希望这样做。我还尝试了旧的javascript代码var text = prompt("Alert", "textbox's intial text");，但客户不喜欢那种外观。我的TL不想在模态中使用iframe。难道没有办法将pdf放在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#)）

最好将其编辑到问题中。 - bjb568
好多了。+1并撤回简历。 - bjb568
打开对话框时隐藏 iframe，关闭对话框时再显示它，这样怎么样？ - AyB
@ICanHasKittenz，我问了客户关于那个选项的事情，但他想要它在后台显示。所以不能隐藏。 - Dhwani
4个回答
6
我已经创建了一个支持IE10及以下版本的解决方案。您可以在这里查看示例。 该解决方案能够检测浏览器是否为IE 10或更低版本，然后将对话框插入到一个iframe中而不是直接插入到当前页面中，并显示在pdf文档上方。然后将关闭函数与现有的对话框关闭X函数挂钩，以便在关闭对话框时删除该frame。
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>

Internet Explorer 9显示PDF时弹出对话框如下图所示：

Screenshot IE9

Internet Explorer 10显示PDF时弹出对话框如下图所示：

Screenshot IE10

@Dhwani，我已经做了一些调整，现在它肯定可以工作了。请查看新的JSBin和JSFiddle。上面还有新的截图。如果你对这个版本有任何问题，请提供一个截图，谢谢。 - Scott
让我们在聊天中继续这个讨论。 - Dhwani
1
@Dhwani 为了澄清事情。该解决方案确实使用了<iframe>来显示模态对话框；这是IE10及以下版本允许在插件（如PDF）上方添加层的唯一方式。您的描述中说我的TL不想在模态中使用iframe，pdf的iframe并不在模态中，而是在其后面。我想帮助解决这个问题，但我需要了解您对我最新解决方案仍然存在哪些问题。 - Scott
嘿，我在Safari上遇到了问题。这是我的问题链接：https://dev59.com/M4Dba4cB1Zd3GeqPJ-AU。你知道问题出在哪里吗？ - Dhwani
3

我曾经遇到过同样的问题，并想出了一个简单的解决方案。虽然这种方法可能不适用于所有情况，但在我的情况下，只需在打开模态框时隐藏PDF即可接受。我使用了类似以下的代码：

$('.modal').on('show.bs.modal', function () {
    // IE pdf embed plugin sits above modals
    if (isIE()) {
        $('body').addClass('hide-iframes');
    }
}).on('hidden.bs.modal', function () {
    if (isIE()) {
        $('body').removeClass('hide-iframes');
    }
});

使用

body.hide-iframes iframe {
    visibility: hidden;
}
我也有同样的解决方案，但我的客户想要在后台保持PDF文件打开。所以我放弃了这个想法。顺便说一句，谢谢。 :) - Dhwani
2

在对话框中添加以下行将解决您的问题

<iframe id="splitFaxFrame" frameborder="0" marginwidth="0" marginheight="0" style="width:100%;height:60em"></iframe>

1
我找到了一个可能有帮助的答案。

IE中嵌入PDF

  <div id="pdf">
          <iframe src="pdf.html" style="width: 100%; height: 100%;" frameborder="0" scrolling="no">
               <p>It appears your web browser doesn't support iframes.</p>
          </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. <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 src="lorem.pdf" type="application/pdf" />
    </object>
</body>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接