Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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>
like image 797
Fresher Avatar asked Feb 09 '16 07:02

Fresher


Video Answer


4 Answers

You can also embed the pdf inside the modal. Like this:

<embed src="sample.pdf" frameborder="0" width="100%" height="400px">

That worked for me

like image 105
gabriel beltrami Avatar answered Sep 19 '22 22:09

gabriel beltrami


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.

like image 21
Nikhil Nanjappa Avatar answered Sep 19 '22 22:09

Nikhil Nanjappa


You can as well try this

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>DisplayPDF</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">

        <!-- Trigger the modal with a button -->
        <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
        <!-- Modal -->
        <div id="myModal" class="modal fade" role="dialog">
            <div class="modal-dialog modal-lg">

                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Modal Header</h4>
                    </div>
                    <div class="modal-body">

                        <embed src="~file:///C:/Users/hp/Downloads/sb_finance.pdf" frameborder="0" width="100%" height="400px">

                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

</body>
</html>
like image 39
Herman Avatar answered Sep 19 '22 22:09

Herman


<div class="modal fade" id="modal-agreement">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <object type="application/pdf" data="path/to/pdf" width="100%" height="500" style="height: 85vh;">No Support</object>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
like image 20
Roberto Sonck Avatar answered Sep 16 '22 22:09

Roberto Sonck