web-dev-qa-db-ja.com

モーダルウィンドウでPDFを表示する方法は？

アンカーテキストを含むモーダルウィンドウがあります。このリンクをクリックすると、別の場所にあるPDFを呼び出して、ポップアップに表示する必要があります。どうやってやるの ？

親切に助けてください。

javascriptjquerypdfmodal-window
15
The Dark Knight

JQuery UIダイアログでこれを行うことができます。ここからJQuery uiをダウンロードできます Download JQueryUI

これらのスクリプトを最初に<head>タグ内に含めます

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

<body>タグ内のHTMLコード。 iframeを使用してPDFファイルを内部にロードします

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

このライブラリを見ることができます。 https://github.com/mozilla/pdf.js レンダリングPDF Web/HTMLページのドキュメント

また、Flashを使用して、そのようなHTMLページにドキュメントを埋め込むことができます。

<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

モーダルマークアップ内にiframeを作成し、そのsrc属性をPDFへのリンクとして指定できます。リンクをクリックすると、このモーダルマークアップを表示できます。

2
Darshan

モーダルフォーム内でiframeを使用して、iframeウィンドウを開くと、モーダルフォーム内でiframeを開くことができます。 u pdfコンテンツがモーダル形式のdivにコンテンツを追加するだけであれば、いくつかのURLでpdfオープナーにレンダリングすることを願っています。

0
Hussain Akhtar Wahid 'Ghouri'