Menu
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);
How can I prevent the PDF from covering the modal? (I am using ASP.NET MVCC 5(C#))
633
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:
Internet Explorer 10 with dialog above PDF:
89
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
