PDF скрыть JQuery Modal в IE

Я показываю PDF в <iframe> с помощью всплывающего окна jQuery при нажатии кнопки. Это прекрасно работает во всех браузерах, кроме IE10, где отображаемый PDF скрывает модальный диалог.

Отбрасывание поддержки IE10 не является вариантом.

Я попытался использовать z-index. В этом jsfiddle модальность вне тела, но ничего не работает. Я мог бы скрыть pdf на всплывающем меню или изменить его положение, но мой клиент этого не хочет. Также я попробовал var text = prompt("Alert", "textbox intial text"); - старый javascript, но клиенту это не нравится. Мой TL не хочет использовать iframe в модальном режиме. Не в любом случае я могу взять pdf за 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);

Как я могу предотвратить распространение PDF-кода на модальный? (Я использую ASP.NET MVCC 5 (С#))

Ответ 1

Я создал решение, поддерживающее IE10 и ниже. Вы можете посмотреть здесь .

Решение определяет, является ли браузер IE <= 10 и вставляет диалог в iframe, а не непосредственно на текущую страницу, который затем отображается над документом pdf. Затем он подключает функцию закрытия к существующей функции закрытия 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:

Internet Explorer 10 с диалоговым окном PDF:

Ответ 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;
}

Ответ 3

Добавить диалоговое окно "Внутренняя линия внутри" будет устранять проблему

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

Ответ 4

Нашел этот ответ, который может помочь

Встроенный pdf для 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="#" onclick="location.href='http://get.adobe.com/reader/'; return false;" target="_blank">click here to install Adobe Reader</a>.</p>
       <embed src="lorem.pdf" type="application/pdf" />
    </object>
</body>