PDF在IE中隐藏Jquery Modal答案

【问题标题】：PDF hide Jquery Modal in IEPDF在IE中隐藏Jquery Modal
【发布时间】：2014-07-26 00:04:41
【问题描述】：

我在 <iframe> 中显示 PDF，在按钮单击时使用 jQuery 模式弹出窗口。这在除 IE10 之外的所有浏览器中都可以正常工作，其中显示的 PDF 隐藏了模式对话框。

放弃对 IE10 的支持不是一种选择。

我尝试使用 z-index。在这个jsfiddle 中，模态在身体之外，但没有任何作用。我可以在弹出窗口中隐藏 pdf 或更改它的位置，但我的客户不希望这样。我也试过var text = prompt("Alert", "textbox's intial text"); - 旧的javascript，但客户不喜欢那种外观。 我的 TL 不想在模态中使用 iframe。 无论如何我不能在 HTML 后面使用 pdf 吗？

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#)）

【问题讨论】：

如果您将其编辑到问题中会更好。
好多了。 +1 并收回简历。
对话框打开时隐藏 iframe 怎么样？然后把它放回关闭对话框。
@ICanHasKittenz 好吧，我向客户询问了该选项，但他希望将其退回。所以无法隐藏。

标签： c# javascript jquery html internet-explorer

【解决方案1】：

我创建了一个支持 IE10 及以下版本的解决方案。您可以查看fiddle here。

该解决方案检测浏览器是否为 IE 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>

Internet Explorer 9 与 PDF 上方的对话框：

带有 PDF 上方对话框的 Internet Explorer 10：

【讨论】：

@Dhwani 我已经做了一些调整，它确实有效。查看新的JSBin 和JSFiddle。上面还有新的截图。如果您对此版本有任何问题，请提供截图，谢谢。
让我们continue this discussion in chat。
@Dhwani 澄清问题。该解决方案确实使用<iframe> 来显示模式对话框；这是唯一的方法 IE10 及以下版本将允许在 PDF 等插件之上添加一个图层。您的描述说My TL don't want to use iframe in modal，pdf iframe 不在模态中，它在后面。我想对此提供帮助，但我需要了解您在使用我的最新解决方案时仍然遇到哪些问题。
嘿，我在 Safari 中也面临同样的问题。这是我的问题。 stackoverflow.com/questions/24359433/…。你知道这是什么问题吗？

【解决方案2】：

我遇到了同样的问题，并想出了一个简单的解决方案。它可能不适用于所有情况，但就我而言，在打开模式时简单地隐藏 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 处于打开状态。所以我跳过这个想法。顺便说一句谢谢。 :)

【解决方案3】：

在对话框内添加下一行将解决您的问题

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

【讨论】：

【解决方案4】：

找到这个可能有帮助的答案

Embedded pdf for IE

  <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>

【讨论】：