PDF cache Jquery Modal dans IE

Je affiche un PDF dans un <iframe> utilisant un menu contextuel modal jQuery sur le clic de bouton. Ceci fonctionne bien dans tous les navigateurs sauf IE10, où le PDF affiché masque la boîte de dialogue modale.

Le renversement du support IE10 n'est pas une option.

J'ai essayé d'utiliser z-index. Dans ce jsfiddle , le modal est en dehors du corps mais rien ne fonctionne. Je pourrais cacher le pdf sur popup ou changer la position de celui-ci, mais mon client ne veut pas cela. J'ai également essayé var text = prompt("Alert", "textbox's intial text"); – javascript ancien, mais le client n'aime pas ce look. Mon TL ne veut pas utiliser l'iframe en mode modal. Est-ce que de toute façon, je peux prendre le pdf derrière 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);

Entrez la description de l'image ici

Comment puis-je empêcher le PDF de couvrir le modal? (J'utilise ASP.NET MVCC 5 (C #))

J'ai créé une solution prenant en charge IE10 et ci-dessous. Vous pouvez voir le violon ici .

La solution détecte si le navigateur est IE <= 10 et insère la boîte de dialogue dans un iframe – plutôt que directement dans la page actuelle – qui s'affiche alors sur le document pdf. Il raccroche ensuite une fonction étroite à la fonction X de fermeture existante de la boîte de dialogue, qui supprime la trame lorsque la boîte de dialogue est fermée.

 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();

Le 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 avec dialogue au-dessus de PDF:

Capture d'écran IE9

Internet Explorer 10 avec dialogue au-dessus de PDF:

Capture d'écran IE10

J'ai eu ce même problème, et j'ai trouvé une solution simple. Cela pourrait ne pas s'appliquer dans tous les cas, mais dans mon cas, il était acceptable de simplement cacher le PDF lorsque le mode modal a été ouvert. J'ai utilisé quelque chose comme suit:

 $('.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'); } });

avec

 body.hide-iframes iframe { visibility: hidden; }

Ajouter au-dessous de la boîte de dialogue Inside Line résoudra votre problème

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

Trouvé cette réponse qui peut aider

Pdf intégré pour 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 code

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