PDF隱藏IE瀏覽器中的Jquery Modal

我在按鈕點擊中使用jQuery模式彈出框在中顯示PDF。這在所有瀏覽器中都可以正常工作，除了IE10，其中顯示的PDF隱藏了模式對話框。PDF隱藏IE瀏覽器中的Jquery Modal

丟棄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＃））

來源

2014-06-05 Dhwani

這將是更好，如果你編輯了進入正題。 – bjb568

@ bjb568，做到了。 – Dhwani

好得多。 +1並收回簡歷。 – bjb568

我創建了一個支持IE10及以下版本的解決方案。您可以查看fiddle here。

解決方案檢測瀏覽器是否爲IE < = 10，並將對話框插入到iframe中 - 而不是直接插入當前頁面 - 然後顯示在pdf文檔上。然後，它會關閉對話框的現有關閉功能的關閉功能，從而在對話框關閉時移除框架。

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

來源

2014-06-11 01:39:32 Scott

以及它不會爲ie工作。我的意思是它不顯示pdf在後面。 – Dhwani

@Dhwani我做了一些調整，它絕對有效。查看新的[JSBin]（http://jsbin.com/parenixa/1/edit?output）和[JSFiddle]（http://jsfiddle.net/PTm6e/）。上面的新截圖也是。如果您對此版本有任何問題，請提供截圖，謝謝。 – Scott

仍然不起作用。 – Dhwani

發現這個答案可以幫助

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>

來源

2014-06-07 03:10:57 user2391759

添加以下線內對話框將解決您的問題

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

來源

2014-06-17 09:20:21 Shasvat

我有這個同樣的問題，用一個簡單的解決方案上來。它可能不適用於所有情況，但在我的情況下，打開模式時隱藏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; 
}

來源

2014-09-18 09:53:09

我也有同樣的解決方案，但我的客戶想在後端保持pdf打開。所以我跳過這個想法。順便說一句謝謝。 :) – Dhwani

PDF隱藏IE瀏覽器中的Jquery Modal

回答

相關問題