PDF hide Jquery Modal in IE

Question

I am displaying a PDF in an <iframe> using a jQuery modal popup on button click. This is works fine in all browsers except IE10, where the displayed PDF hides the modal dialog.

Dropping IE10 support is not an option.

I tried using z-index. In this jsfiddle, the modal is outside of the body but nothing works. I could hide the pdf on popup or change the position of it, but my client don't want that. Also I tried var text = prompt("Alert", "textbox's intial text"); - old javascript, but client don't like that look. My TL don't want to use iframe in modal. Isn't anyway I can take pdf behind 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

How can I prevent the PDF from covering the modal? (I am using ASP.NET MVCC 5(C#))

How about hiding the iframe when the dialog opens? And then put it back on closing the dialog. — AyB, Jun 05 '14 at 07:54
@ICanHasKittenz well i ask client about that option but he want it in back. So can't hide. — Dhwani, Jun 05 '14 at 08:35

Scott · Accepted Answer · 2014-06-11T14:13:42.247

I have created a solution that supports IE10 and below. You can view the fiddle here.

The solution detects if the browser is IE <= 10 and inserts the dialog into an iframe - rather than directly into the current page - which is then displayed over the pdf document. It then hooks up a close function to the existing close X function of the dialog, which removes the frame when the dialog is closed.

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

The 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 with dialog above PDF:

Screenshot IE9

Internet Explorer 10 with dialog above PDF:

Screenshot IE10

@Dhwani I have made some adjustments, it's definitely working. Check out the new [JSBin](http://jsbin.com/parenixa/1/edit?output) and [JSFiddle](http://jsfiddle.net/PTm6e/). New screenshot above too. If you have any issues with this version, please provide a screenshot, thanks. — Scott, Jun 11 '14 at 10:42
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/55429/discussion-between-dhwani-and-scott). — Dhwani, Jun 11 '14 at 11:34
@Dhwani To clear things up. The solution does use an `` to display the modal dialog; It is **the only way** IE10 and below will allow a layer on top of a plugin such as a PDF. Your description says `My TL don't want to use iframe in modal`, the pdf iframe is not in the modal, it is behind. I want to help with this but I need to understand what issues you are still having with my latest solution. — Scott, Jun 11 '14 at 14:11
Hey I am facing issue in safari for the same. Here is my question. http://stackoverflow.com/questions/24359433/pdf-hides-jquery-modal-in-safari. Do u knw whats the issue? — Dhwani, Jun 23 '14 at 12:27

score 3 · Answer 2 · answered Sep 18 '14 at 09:53

I had this same problem, and came up with a simple solution. It might not be applicable in all cases, but in my case, it was acceptable to simply hide the PDF when the modal was opened. I used something like the following:

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

with

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

I also had same solution but my client wanted to keep pdf open in backend. So I skip this idea. Btw thanks. :) — Dhwani, Sep 18 '14 at 12:28

score 2 · Answer 3 · answered Jun 17 '14 at 09:20

2

Add Below Line Inside Dialog Will Resolve your issue

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

answered Jun 17 '14 at 09:20

Shasvat

258
3
8

score 1 · Answer 4 · edited May 23 '17 at 12:30

Found this answer that may help

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

PDF hide Jquery Modal in IE

4 Answers4

Linked