Hello Devistics! Let's show a PDF file with PDF Viewer in a modal or popup.

← Go Back

Let's Get Started...

Show PDF

Code for PDF Viewer in Bootstrap Modal (Please Download ViewerJS from repository)


         <!DOCTYPE html>
         <html dir="ltr" mozdisallowselectionprint>
         <head>
             <meta charset="utf-8">
             <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
             <meta name="google" content="notranslate">
             <title>PDF.js viewer </title>
             <link rel="icon" type="image/png" href="da-white.png" />
             <!-- links -->
             <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
             <link rel="stylesheet" href="bootstrap.min.css">
             <!-- ref: https://viewerjs.org/instructions/ -->
         </head>
        
         <body>
             <h1>Hello Devistic </h1>
             <a type="button" style="width: 10rem; background-color: gray; border-radius: 4px; text-decoration: none; padding: 1rem; color:white;" data-toggle="modal" data-target="#pdfModal">Show PDF </a>
        
             <!-- Bootstrap Modal -->
             <div class="modal fade" id="pdfModal" tabindex="-1" role="dialog" aria-labelledby="pdfModalLabel" aria-hidden="true">
                 <div class="modal-dialog modal-lg">
                     <div class="modal-content">
                         <div class="modal-header">
                             <h5 class="modal-title" id="pdfModalLabel">PDF Viewer </h5>
                             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                 <span aria-hidden="true">× </span>
                             </button>
                         </div>
                         <div class="modal-body">
                             <iframe id="pdfIframe" width="100%" height="500"> </iframe>
                         </div>
                     </div>
                 </div>
             </div>
        
             <!-- scripts -->
             <script src="jquery.slim.min.js"> </script>
             <script src="bootstrap.bundle.min.js"> </script>
         </body>
         </html>