Login/Register
How to display a pdf in a modal window? [closed]
Asked Answered
Solved javascriptjquerypdfmodal-window
H

4

20

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 .

Humpage answered 9/11, 2012 at 9:53 Comment(5)
what do you mean by a modal window? – Adulterant
A modal window is a browser modal window. It pops up, when a button is clicked ., which will have a link. When that one is clicked, a pdf pop up must come up . – Humpage
you can use iframe to show your pdf but it will only show if plugin is available for browser.Another option is to use js library – Matelda
Hi Rajesh, what is the js library that you are talking about ? Are there any examples on how to achieve this kind of functionality ? – Humpage
Look into jspdf and pdfjs. It'd be nice if you at least share the HTML/CSS for the modal window to help those trying to help you. – Cida
A
33

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>
Adulterant answered 9/11, 2012 at 10:23 Comment(6)
upvoted, looks good. Will try it out, Tx – Humpage
I have tested and posted it. Hope it helps you. – Adulterant
it's working perfectly most of the modern browsers except safari. In safari, when close the the model window it doesn't close the iframe itself. any idea ? – Yacov
@Adulterant - How about opening the pdf in edit mode and then be able to save my edits in javascript. – Henderson
It's useful to note that the behaviour depends of the settings of the browser. By default for example Firefox will download the document and show a blank frame, whereas Chrome will preview the document inside the frame as expected.Those settings can be updated though. – Percutaneous
You really helped me out here mate @Adulterant – Billings
B
7

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>
Bronchi answered 9/11, 2012 at 10:33 Comment(1)
Now in 2019 it appears most browsers will just display a PDF inline if you do this. I didn't try it with the warning inside but most of my browsers just displayed the PDF. – Blearyeyed
H
3

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.

Hortense answered 9/11, 2012 at 10:1 Comment(1)
Darshan, will you kindly give me any example code of this ? This will help me in understanding it . – Humpage
T
0

you can use iframe within your modal form so when u open the iframe window it open inside your your modal form . i hope you are rendering to some pdf opener with some url , if u have the pdf contents simply add the contents in a div in the modal form .

Taveras answered 9/11, 2012 at 10:34 Comment(1)
Try this: jsfiddle.net/74udp5yz/1 if you want vanilla js. – Keare

© 2022 - 2024 — McMap. All rights reserved.