Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to display a pdf in a modal window? [closed]

I have a modal window, which contains an anchor text. When i click on this link, it must call a pdf housed somewhere else and display it in a pop up . How can I do that ?

Kindly help .

like image 498
The Dark Knight Avatar asked Nov 09 '12 09:11

The Dark Knight


People also ask

How do I display a PDF in a modal window?

You can have an iframe inside the modal markup and give the src attribute of it as the link to your pdf. On click of the link you can show this modal markup.


Video Answer


3 Answers

You can do this using with jQuery UI dialog, you can download JQuery ui from here Download JQueryUI

Include these scripts first inside <head> tag

<link href="css/smoothness/jquery-ui-1.9.0.custom.css" rel="stylesheet">
<script language="javascript" type="text/javascript" src="jquery-1.8.2.js"></script>
<script src="js/jquery-ui-1.9.0.custom.js"></script>

JQuery code

<script language="javascript" type="text/javascript">
  $(document).ready(function() {
    $('#trigger').click(function(){
      $("#dialog").dialog();
    }); 
  });                  
</script>

HTML code within <body> tag. Use an iframe to load the pdf file inside

<a href="#" id="trigger">this link</a>
<div id="dialog" style="display:none">
    <div>
    <iframe src="yourpdffile.pdf"></iframe>
    </div>
</div> 
like image 152
Swarne27 Avatar answered Oct 17 '22 02:10

Swarne27


You can have a look at this library: https://github.com/mozilla/pdf.js it renders PDF document in a Web/HTML page

Also you can use Flash to embed the document into any HTML page like that:

<object data="your_file.pdf#view=Fit" type="application/pdf" width="100%" height="850">
    <p>
        It appears your Web browser is not configured to display PDF files. No worries, just <a href="your_file.pdf">click here to download the PDF file.</a>
    </p>
</object>
like image 45
Alex Rashkov Avatar answered Oct 17 '22 02:10

Alex Rashkov


You can have an iframe inside the modal markup and give the src attribute of it as the link to your pdf. On click of the link you can show this modal markup.

like image 37
Darshan Avatar answered Oct 17 '22 01:10

Darshan