Bootstrap Snippet PDF in modal using Easy Modal Plugin using HTML CSS jQuery

"PDF in modal using Easy Modal Plugin"
Bootstrap 3.1.0 Snippet by bryanrojasq

1
2
3
4
5
6
7
8
9
10
11
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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>PDF in modal preview using 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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
    .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%;
}
.modal.in .modal-dialog {
  transform: none; /*translate(0px, 0px);*/
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/*
* 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;        
    });    
})
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Questions / Comments:

Posting GuidelinesFormatting

Hi, how can I get the code of your snippet? ...I need some like these for showing PDF files, not for download.

codigo () - 7 years ago - Reply 0

This works great @brojask! Thanks.

Raymond Wachaga () - 7 years ago - Reply 0

Nice work Brian!

Do you think it would be possible to pass a pdf parameter sunch as find, namedest, page via your script ?

Cheers
Pierre

Pierre () - 8 years ago - Reply 0

How can i use this plugin with angularJS ?!

Lyn () - 8 years ago - Reply 0

hi ! the pdf is shown in another page not like the demo !

zen () - 8 years ago - Reply 0

One question, how do I add my own ID

Sboniso Marcus Nzimande () - 9 years ago - Reply 0

Good work man! Life saver

Sboniso Marcus Nzimande () - 9 years ago - Reply 0

its not working on mobile..

deepakprasad () - 9 years ago - Reply 0

Thank you!!!!! this is very useful. For some reason, I can't scroll the pdf on an ipad. Any idea why?

Esther () - 9 years ago - Reply 0

is there away you can make the pdf dynamic..?

Sean () - 9 years ago - Reply 0

Hi Sean, the Pdf is already dynamic. You have to change the SRC inside the anchor tag
Greetings

Bryan () - 9 years ago - Reply 0

This is really awesome. Great work.. Finding few issues with Safari and IE. Close button is appearing different in Safari.

Dinesh Appavoo () - 9 years ago - Reply 0

Nice very useful!! Thank You

Obed () - 10 years ago - Reply 0

Good...

Chhang Sithavuth () - 10 years ago - Reply 0

PDF only gets downloaded but it does not appear on the modal..I want it to be displayed on the modal

Marvin () - 10 years ago - Reply 0

Hi Marvin, I'm sorry and you're right. Thats because I work with Linux and the problem is with MS Windows. I updated the snippet if you need it, late but safe. Greetings. :)

"PDF in modal using Easy Modal Plugin" Bootstrap 3.1.0 Snippet by bryanrojasq

Related: See More

Questions / Comments:

"PDF in modal using Easy Modal Plugin"
Bootstrap 3.1.0 Snippet by bryanrojasq