JQuery Open Dialog PDF File is very useful because most of time we want to a pdf file also should be open in dialog box its look great for website also we no need to set target for next page, I am sure many already used this for images now we will do with pdf file.
First of all you have to add Ajax JQuery and Ajax CSS in your web page head section.
<head>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css" rel="stylesheet" type="text/css" />
Then Add Following java script
<script type="text/javascript">
$(function () {
var fileName = "filename.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, "write pdf folder name/" + fileName);
$("#dialog").html(object);
}
});
});
});
</script>
If you want you can change width and height your dialog box
I hope you will find this code helpful
No comments:
Post a Comment