PDF隐藏了IE中的Jquery Modal

时间：2014-06-05 06:02:23

标签： c# javascript jquery html internet-explorer

我在按钮点击时使用jQuery模式弹出窗口在<iframe>中显示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);

enter image description here

如何阻止PDF覆盖模态？ （我使用的是ASP.NET MVCC 5（C＃））

4 个答案:

答案 0 :(得分：6)

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

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

Internet Explorer 9，对话框上方为PDF：

Screenshot IE9

Internet Explorer 10，对话框上方为PDF：

Screenshot IE10

答案 1 :(得分：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;
}

答案 2 :(得分：2)

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

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

答案 3 :(得分：1)

找到可能有帮助的答案

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>
相关问题
最新问题