In this article I will explain with an example, how to open (display)
PDF File inside
jQuery Dialog Modal Popup Window.
The
PDF file will be embedded inside
jQuery Dialog Modal Popup Window using OBJECT
Tag.
HTML Markup
<input id="btnShow" type="button" value="Show PDF" />
<div id="dialog" style="display: none"></div>
Displaying PDF File inside jQuery Dialog Modal Popup Window
Inside the
HTML Markup, first the following
CSS file is inherited.
1. jquery-ui.css
And then, the following JS scripts are inherited.
1. jquery.min.js
2. jquery-ui.js
Here the jQuery document ready event handler, has been assigned to the Button.
When the
Button is clicked the
jQuery UI Dialog Modal Popup is shown. Inside the open event handler of
jQuery Dialog Modal Popup window, an OBJECT tag is generated using an
HTML string variable in which the path of the
PDF file to be displayed is set.
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var fileName = "Mudassar_Khan.pdf";
$("#btnShow").click(function () {
$("#dialog").dialog({
modal: true,
title: fileName,
width: 540,
height: 450,
buttons: {
Close: function () {
$(this).dialog('close');
}
},
open:function () {
var object = "<object data= \"{FileName}\" type= \"application/pdf\" width= \"500px\" height= \"300px\">";
object += "If you are unable to view file, you can download from <a href= \"{FileName}\">here</a>";
object += " or download <a target = \"_blank\" href = \"http://get.adobe.com/reader/\">Adobe PDF Reader</a> to view the file.";
object += "</object>";
object = object.replace(/{FileName}/g, "Files/" + fileName);
$("#dialog").html(object);
}
});
});
});
</script>
Screenshot
![Open (Display) PDF File inside jQuery Dialog Modal Popup Window]()
Browser Compatibility
* All browser logos displayed above are property of their respective owners.
Downloads
