19

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 .

The Dark Knight
  • 5,455
  • 11
  • 54
  • 95
  • what do you mean by a modal window? – Swarne27 Nov 09 '12 at 09:56
  • 1
    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 . – The Dark Knight Nov 09 '12 at 09:58
  • 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 – rajesh kakawat Nov 09 '12 at 10:01
  • Hi Rajesh, what is the js library that you are talking about ? Are there any examples on how to achieve this kind of functionality ? – The Dark Knight Nov 09 '12 at 10:02
  • 1
    Look into [jspdf](http://parall.ax/products/jspdf) and [pdfjs](http://mozilla.github.io/pdf.js/). It'd be nice if you at least share the `HTML/CSS` for the modal window to help those trying to help you. – T J Aug 16 '14 at 14:20

4 Answers4

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>
Swarne27
  • 5,521
  • 7
  • 26
  • 41
  • upvoted, looks good. Will try it out, Tx – The Dark Knight Nov 09 '12 at 10:27
  • I have tested and posted it. Hope it helps you. – Swarne27 Nov 09 '12 at 10:35
  • 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 ? – Janith Chinthana Feb 04 '15 at 07:23
  • @Swarne27 - How about opening the pdf in edit mode and then be able to save my edits in javascript. – gkb Apr 29 '16 at 05:35
  • 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. – Eli May 27 '18 at 22:48
  • You really helped me out here mate @Swarne27 – andres_v Oct 20 '20 at 03:59
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>
Alex Rashkov
  • 9,833
  • 3
  • 32
  • 58
  • 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. – Steve Hiner Nov 11 '19 at 22:03
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.

Darshan
  • 91
  • 1
  • 6
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 .

Hussain Akhtar Wahid 'Ghouri'
  • 6,527
  • 8
  • 50
  • 85