【jQuery+Modaal】PDFをモーダルウィンドウに表示する

こんにちは、Ryohei（@ityryohei）です！

本記事では、jQueryプラグインのModaalを使って、PDFファイルをモーダルウィンドウに表示する方法をご紹介しています。

上記の疑問にお答えします。

では、解説していきます。

本記事で作成するもの

本記事では、下記のデモのようにPDFファイルをモーダルウィンドウで表示する処理を作成していきます。

下記のデモはCodePen上で作成したものを埋め込んでいます。クロスドメインのため、ブラウザによってはPDFファイルがブロックされる可能性がありますが、同一ドメイン上での運用であれば動作しますのでご安心ください。

See the Pen View PDF Modal Window｜Modaal by ryohei (@intotheprogram) on CodePen.

では作成方法を見ていきましょう。

jQueryとModaalを読み込む

本記事では、jQueryプラグインのModaalを使用します。そのため事前にこれらのファイルを読み込んでおく必要があります。どちらもCDNが用意されているため、CDNで読み込みましょう。

<!-- CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Modaal/0.4.4/css/modaal.min.css">

<!-- ここにHTML -->

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Modaal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Modaal/0.4.4/js/modaal.min.js"></script>
<script>
    //ここにJS
</script>

HTMLでPDFのリンクを作成する

続いてHTMLでPDFのリンクを作成します。

今回はjQueryを使用しますので、$()で要素が取得しやすいようにidやclassを指定しておきます。ここではpdfというclassを指定します。もちろんタグ名でも取得可能ですので、指定しなくでも大丈夫です。

<a href="https://into-the-program.com/uploads/example.pdf" class="pdf">PDF</a>

Modaalを初期化する

最後にModaal を初期化します。

Modaalでは、モーダルウィンドウで表示するコンテンツに応じてtypeオプションで値を指定することができますが、PDFという値は用意されていません。ただiframeを使用することでPDFをモーダルウィンドウ内で表示するようにできますで、iframeを指定します。

$('.pdf').modaal({
    type: 'iframe',
});

これでモーダルウィンドウ内にPDFを表示することができます。

全体ソース

最後に本記事でご紹介した全体のソースをまとめます。急ぎの方はこちらを利用していただければと思います。

<!-- CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Modaal/0.4.4/css/modaal.min.css">

<a href="https://into-the-program.com/uploads/example.pdf" class="pdf">PDF</a>

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Modaal -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Modaal/0.4.4/js/modaal.min.js"></script>
<script>
    $('.pdf').modaal({
        type: 'iframe',
    });
</script>

最後に

PDFは基本的に外部リンクで表示するようにコーディングすることが多いですが、モーダルウィンドウ内で開けばタブを切り替える必要がないため、中々良いのではないかなと思います。

本記事ではプラグインを使用しましたが、プラグインを使用せずとも自作のモーダルウィンドウでiframeを呼び出すことで実装できるはずですので、自作しておいて使い回すのもありかもしれませんね。

以上、ModaalでPDFをモーダルウィンドウに表示する方法のご紹介でした！