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.
<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.