Fresher Fresher - 1 year ago 195
Javascript Question

PDF file to be displayed on the dialog modal via bootstrap

My requirement is, on click of a button, a pdf file should be displayed on dialog modal.
Please Help!

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>View PDF</h2>
<!-- Trigger the modal with a button -->
<button type="button" href="A - Cover Page.pdf" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">A - Cover Page</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

Answer Source

Sorry to disappoint you but one cannot just show the pdf inside a modal by default. It is not an intended behavior. Even using <iframe>, you cannot render the pdf inside the bootstrap modal. Also most of the hacks provided online does not support cross-browser. The more ideal way is to use plugins for the same and I will give you the links for few using which you can achieve what you want.

1) Checkout PDFObject JS,

<script src="https://github.com/pipwerks/PDFObject/blob/master/pdfobject.min.js"></script>

PDFObject embeds PDF files into HTML documents. Link.

2) Easy Modal Plugin for Bootstrap. Demo Snippet and Website

3) Using jQuery Dialog Modal Popup Window. Demo.

Hope it helped.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download