PDF hide Jquery Modal in IE

0 votes

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

Aug 11 in Web Development by gaurav
• 18,960 points
29 views

No answer to this question. Be the first to respond.

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.

Related Questions In Web Development

0 votes
1 answer

Get checkbox value in jQuery

To get the value of the Value ...READ MORE

answered Jun 23 in Web Development by rajatha
• 7,440 points
25 views
0 votes
1 answer

Get checkbox value in jQuery

if you have set a class or id for it, you ...READ MORE

answered Jun 23 in Web Development by rajatha
• 7,440 points
45 views
0 votes
1 answer

JQuery Ajax Post results in 500 Internal Server Erro

The 500 Internal Server Error is a ...READ MORE

answered Jun 23 in Web Development by rajatha
• 7,440 points
1,313 views
0 votes
1 answer

explode string in jquery

Use the JavaScript split() method If you want ...READ MORE

answered Jun 23 in Web Development by rajatha
• 7,440 points
68 views
0 votes
1 answer

how to use substr() function in jquery?

To get substring of a string in ...READ MORE

answered Jun 27 in Web Development by rajatha
• 7,440 points
38 views
0 votes
1 answer

How to loop through array in jQuery?

Generic loop: var i; for (i = 0; i ...READ MORE

answered Jun 28 in Web Development by rajatha
• 7,440 points
39 views
0 votes
1 answer

What is jQuery?

Hey, jQuery is a fast and concise JavaScript ...READ MORE

answered Feb 14, 2020 in JQuery by kartik
• 37,510 points
322 views
0 votes
1 answer

Uncaught TypeError: Cannot read property 'msie' of undefined - jQuery tools

Hello, Use the following script tag in your ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,780 points
9,280 views
0 votes
1 answer

Uncaught Error: Bootstrap's JavaScript requires jQuery

Hello @kartik, You have provided wrong order for ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,780 points
16,451 views
0 votes
1 answer

How to make Bootstrap popover Appear/Disappear on hover instead of click?

Hello @kartik, Set the trigger option of the popover to hover instead ...READ MORE

answered May 12, 2020 in JQuery by Niroj
• 82,780 points
1,413 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP