PDF hide Jquery Modal w IE

Wyświetlam plik PDF w postaci za pomocą modalnego podręcznego okna jQuery po kliknięciu przycisku. Działa to dobrze we wszystkich przeglądarkach z wyjątkiem IE10, gdzie wyświetlany plik PDF ukrywa okno dialogowe modalne.PDF hide Jquery Modal w IE

Upuszczanie wsparcia dla IE10 nie jest opcją.

Próbowałem użyć z-index. W tym jsfiddle modal jest poza ciałem, ale nic nie działa. Mogłabym ukryć plik PDF na wyskakującym okienku lub zmienić jego położenie, ale mój klient tego nie chce. Próbowałem też var text = prompt("Alert", "textbox's intial text"); - starego javascript, ale klient nie lubi tego wyglądu. Mój TL nie chce używać iframe w trybie modalnym. Czy w ogóle nie mogę wziąć pdf za 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

Jak mogę zapobiec PDF z pokrycia modalne? (Używam ASP.NET MVCC 5 (C#))

Źródło

2014-06-05 Dhwani

Byłoby lepiej, jeśli edytowany że w pytaniu. – bjb568

@ bjb568, zrobiłem to. – Dhwani

Znacznie lepiej. +1 i wycofane CV. – bjb568

Stworzyłem rozwiązanie obsługujące IE10 i poniżej. Możesz zobaczyć fiddle here.

Rozwiązanie wykrywa, czy przeglądarka jest IE < = 10 i wstawia okno dialogowe do elementu iframe - zamiast bezpośrednio do bieżącej strony - która jest następnie wyświetlana nad dokumentem PDF. Następnie łączy funkcję zamkniętą z istniejącą funkcją okna dialogowego, która usuwa ramkę po zamknięciu okna dialogowego.

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 z okna powyżej PDF:

Screenshot IE9

Internet Explorer 10 z okna powyżej PDF:

Screenshot IE10

Źródło

2014-06-11 01:39:32 Scott

dobrze to nie działa na przykład. mam na myśli To nie pokazuje pdf z tyłu. – Dhwani

@Dhwani Wprowadziłem pewne poprawki, zdecydowanie działa. Sprawdź nowy [JSBin] (http://jsbin.com/parenixa/1/edit?output) i [JSFiddle] (http://jsfiddle.net/PTm6e/). Nowy zrzut ekranu również powyżej. Jeśli masz jakiekolwiek problemy z tą wersją, proszę zrób zrzut ekranu, dziękuję. – Scott

nadal nie działają. – Dhwani

uznało tę odpowiedź, która może pomóc

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>

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

Źródło

2014-06-07 03:10:57 user2391759

Dodaj Poniżej Wewnątrz Dialog linia będzie rozwiązać problem

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

Źródło

2014-06-17 09:20:21 Shasvat

miałem ten sam problem, i wpadł prostego rozwiązania. Może nie mieć zastosowania we wszystkich przypadkach, ale w moim przypadku można było po prostu ukryć plik PDF, gdy modal został otwarty.Kiedyś coś jak następuje:

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

Źródło

2014-09-18 09:53:09

Też miałem takie samo rozwiązanie, ale mój klient chciał zachować pdf otwarty w backend. Pomijam ten pomysł. Btw dzięki. :) – Dhwani

PDF hide Jquery Modal w IE

Odpowiedz

Powiązane problemy