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

こんにちは、ryohei(@ityryohei)です!

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

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を使用しますので、$()で要素が取得しやすいようにidclassを指定しておきます。ここでは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をモーダルウィンドウに表示する方法のご紹介でした!

Adobe Creative Cloudを通常価格で購入していませんか?

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。

Adobeマスター講座はこちら

おすすめの書籍