How to open pdf in modal using javascript/jquery/bootstrap?

0
votes

How to open pdf in modal using javascript/jquery/bootstrap without download? I am trying using bootstrap modal but it not working. Why ? I am using code for below source - http://bootsnipp.com/snippets/P3Vvm

<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://wellnesshabitat.nexmapp.com/wp-content/uploads/2017/04/License.pdf">View PDF</a>        
    </div>
</div>

Jquery code: /* * 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='';html+='';html+='';html+='';html+='×';if(b.title.length>0){html+=''+b.title+""}html+="";html+='";html+=b.message;html+="";html+='';if(b.closeButton===true){html+='Close'}html+="";html+="";html+="";html+="";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;        
    });    
})
    .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%;
}
2
javascriptjquerypdfmodelbootstrap-modal
Please include your relevant code, and please include what part of your code is not working. – Carsten Løvbo Andersen

2 Answers

0
votes

Please show us your code you have so far. Also, you cannot show a pdf in a modal by default bootstrap / jQuery. You have two options:

  1. Use a lib like this one
  2. Use an iframe inside the modal and load this GDocs link:

https://docs.google.com/gview?embedded=true&url=" + LinkToThePDFFile

Please provide more information for a better answer.

0
votes
    1) Checkout PDFObject JS,

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

    1)PDFObject embeds PDF files into HTML documents. https://pdfobject.com/

    2) Easy Modal Plugin for Bootstrap. http://bootsnipp.com/snippets/VX7EN
    3) Using jQuery Dialog Modal Popup Window. 

    Hope it helped.



  [1]: http://bootsnipp.com/snippets/VX7EN