Wpdevcodes

Wordpress

How to display a pdf in a modal window

In this tutorial we can show you how to display PDF in a modal window.

Below is the Sampel code snippet for how to display a pdf in a modal window.
add this bleow scripts and styles into the head(<head>) tag.

display a pdf in a modal window-wpdevcodes

<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"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css" rel="stylesheet"/>
<style>
.ui-dialog.ui-widget.ui-widget-content.ui-corner-all.ui-draggable.ui-resizable {
width: 850px !important;
height: 500px !important;
left: 215px !important;
top: 450px;

}
.ui-dialog-titlebar.ui-widget-header.ui-corner-all.ui-helper-clearfix {
background: #3C3C3C;
}
</style>

then add the below code where you want to display the PDF in the pop up

<script>
jQuery(document).ready(function($) {
$('#btnShow').click(function(){
$("#dialog").dialog();
$("#frame").attr("src", "http://www.africau.edu/images/default/sample.pdf");
});
});
</script>

<a class="download-pdf" href="JavaScript:Void(0);" id="btnShow">View PDF</a>
<div id="dialog" style="display: none;">
<div>
<iframe style="width:100%" height="500px" id="frame"></iframe>
</div>
</div>

We are hoping this article can give you the best way for how to display a pdf in a modal window.

Tags: