web-dev-qa-db-fra.com

Comment afficher un pdf dans une fenêtre modale?

J'ai une fenêtre modale, qui contient un texte d'ancrage. Lorsque je clique sur ce lien, il doit appeler un pdf hébergé ailleurs et l'afficher dans une fenêtre contextuelle. Comment puis je faire ça ?

Aide aimablement .

javascriptjquerypdfmodal-window
15
The Dark Knight

Vous pouvez le faire en utilisant la boîte de dialogue jQuery UI, vous pouvez télécharger l'interface utilisateur JQuery à partir d'ici Télécharger JQueryUI

Incluez d'abord ces scripts dans <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>

Code JQuery

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

Code HTML dans <body> tag. Utilisez un iframe pour charger le fichier pdf à l'intérieur

<a href="#" id="trigger">this link</a>
<div id="dialog" style="display:none">
    <div>
    <iframe src="yourpdffile.pdf"></iframe>
    </div>
</div>
26
Swarne27

Vous pouvez jeter un œil à cette bibliothèque: https://github.com/mozilla/pdf.js elle rend PDF dans une page Web/HTML

Vous pouvez également utiliser Flash pour incorporer le document dans n'importe quelle page HTML comme celle-ci:

<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>
6
Alex Rashkov

Vous pouvez avoir un iframe à l'intérieur du balisage modal et en donner l'attribut src comme lien vers votre pdf. En cliquant sur le lien, vous pouvez afficher ce balisage modal.

2
Darshan

vous pouvez utiliser iframe dans votre formulaire modal, donc lorsque vous ouvrez la fenêtre iframe, il s'ouvre à l'intérieur de votre formulaire modal. j'espère que vous effectuez un rendu vers un ouvreur pdf avec une URL, si vous avez le contenu pdf, ajoutez simplement le contenu dans un div sous la forme modale.

0
Hussain Akhtar Wahid 'Ghouri'