"Untitled"
Bootstrap 4.1.1 Snippet by sanoasis

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!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"> <br> <!-- Trigger the modal with a button --> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">EU Information Sheet (PDF)</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">×</button> <h4 class="modal-title">PDF Modal</h4> </div> <div class="modal-body"> <embed src="https://dcadprod.azureedge.net/b2b-experience-production/attachments/ckgdpd63t050301m2nx6d99xt-michelin-truck-tire-service-manual.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>
.iframe-container { padding-bottom: 60%; padding-top: 30px; height: 0; overflow: hidden; } .iframe-container iframe, .iframe-container object, .iframe-container embed{ position: absolute; top: 0; left: 0; width: 50%; height: 50%; } .modal.in .modal-dialog { transform: none; /*translate(0px, 0px);*/ }
/* * This is the plugin */ (function(a){a.createModal=function(b){defaults={title:"",message:"Your Message Goes Here!",closeButton:true,scrollable:false};var b=a.extend({},defaults,b);var c=(b.scrollable===true)?'style="max-height: 420px;overflow-y: auto;"':"";html='<div class="modal fade" id="myModal">';html+='<div class="modal-dialog">';html+='<div class="modal-content">';html+='<div class="modal-header">';html+='<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>';if(b.title.length>0){html+='<h4 class="modal-title">'+b.title+"</h4>"}html+="</div>";html+='<div class="modal-body" '+c+">";html+=b.message;html+="</div>";html+='<div class="modal-footer">';if(b.closeButton===true){html+='<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>'}html+="</div>";html+="</div>";html+="</div>";html+="</div>";a("body").prepend(html);a("#myModal").modal().on("hidden.bs.modal",function(){a(this).remove()})}})(jQuery); /* * Here is how you use it */ $(function(){ $('.view-pdf').on('click',function(){ var pdf_link = $(this).attr('href'); //var iframe = '<div class="iframe-container"><iframe src="'+pdf_link+'"></iframe></div>' //var iframe = '<object data="'+pdf_link+'" type="application/pdf"><embed src="'+pdf_link+'" type="application/pdf" /></object>' var iframe = '<object type="application/pdf" data="'+pdf_link+'" width="100%" height="500">No Support</object>' $.createModal({ title:'My Title', message: iframe, closeButton:true, scrollable:false }); return false; }); })

Related: See More

Paper Kit Pro

Questions / Comments: