<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2>Showing PDF in popup modal preview using Bootstrap Easy Modal Plugin</h2> <a class="btn btn-primary view-pdf" href="http://www.bodossaki.gr/userfiles/file/dummy.pdf">View PDF</a> </div> </div>

.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: 100%; height: 100%; }

/* * 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>' $.createModal({ title:'My Title', message: iframe, closeButton:true, scrollable:false }); return false; }); })