2012-11-09 26 views
11

Mam okno modalne, które zawiera tekst zakotwiczenia. Kiedy kliknę na ten link, musi wywołać plik PDF umieszczony w innym miejscu i wyświetlić go w wyskakującym okienku. Jak mogę to zrobić ?Jak wyświetlić plik PDF w oknie modalnym?

Uprzejmy pomoc.

+0

co masz na myśli przez okno modalne? – Swarne27

+1

Okno modalne to okno modalne przeglądarki. Wyskakuje po kliknięciu przycisku, który będzie miał link. Kiedy klikniesz, pojawi się pop-up pdf. –

+0

możesz użyć iframe do wyświetlenia pliku pdf, ale będzie on wyświetlany tylko wtedy, gdy wtyczka jest dostępna dla przeglądarki. Inną opcją jest użycie biblioteki js. –

Odpowiedz

20

Można to zrobić korzystając z okna dialogowego jQuery UI, można pobrać jQuery UI stąd Download JQueryUI

to przede te skrypty wewnątrz <head> tagu kodu

<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

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

HTML kod w obrębie tagu <body>. Użyj iframe załadować plik pdf wewnątrz

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

przegłosowano, wygląda dobrze. Wypróbuję to, Tx –

+0

Przetestowałem i opublikowałem to. Mam nadzieję, że ci to pomoże. – Swarne27

+0

działa doskonale w większości nowoczesnych przeglądarek z wyjątkiem safari. W safari, po zamknięciu okna modelu nie zamyka samego elementu iframe. dowolny pomysł ? –

2

Możesz mieć element iframe wewnątrz modalnego znacznika i podać atrybut src jako link do twojego pdf. Po kliknięciu linku można wyświetlić ten modalny znacznik.

+0

Darshan, czy uprzejmie podasz mi przykład kodu? To pomoże mi to zrozumieć. –

5

Można przyjrzeć się tej biblioteki: https://github.com/mozilla/pdf.js renderuje dokument w formacie PDF na stronie internetowej/HTML

Również można użyć lampy błyskowej, aby umieścić dokument do każda strona HTML tak:

<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> 
0

można użyć iframe w swoim modalnej formie, kiedy u otworzyć okno iframe otworzy wewnątrz swojej modalnego formularza. Mam nadzieję, że renderujesz do jakiegoś otwieracza PDF z jakimś URL-em, jeśli masz zawartość pdf po prostu dodajesz zawartość do div w formie modalnej.

Powiązane problemy