PDFをモーダルウインドウに表示する方法【HTML/CSS/JavaScript・サンプルコード付き】

PDFをモーダルウインドウに表示する方法

PDFをモーダルウインドウに表示する方法を紹介します。このサンプルでは、「PDFを表示」ボタンをクリックすると画面全体に半透明の背景が表示され、その中央にPDFを閲覧できるモーダルウインドウを開きます。PDFを別ページへ移動せず、その場で確認できるため、資料や案内書、マニュアルなどをページ内からすぐに閲覧できる構成を作れます。

会員サイトの資料確認、ECサイトの商品説明書、管理画面のマニュアル、サービス紹介ページのパンフレットなど、PDFをその場で確認してもらいたい場面に適しています。モーダル内にはPDFを表示するiframeを配置し、画面サイズに応じて横幅や高さを調整できるため、スマートフォン・タブレット・PCでも利用しやすい構成です。また、「×」ボタンまたは背景部分をクリックするとモーダルを閉じられます。

HTMLでは表示するPDFのURLやボタンの文章を変更でき、CSSではモーダルの最大横幅、余白、角丸、背景色、影、PDF表示領域の高さなどを調整できます。JavaScriptではモーダルの表示と非表示を切り替えるシンプルな処理を使用しています。PDFをページ本文へ常時表示せず、必要なときだけ大きく確認できるため、ページ内をすっきり見せながらPDF閲覧機能を追加したい場合に利用できます。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。

免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

「PDFを表示」をクリックするとモーダルウインドウ内でPDFを閲覧できます。「×」ボタンまたは背景部分をクリックすると閉じます。

コードをコピーして使おう！

<!DOCTYPE html>
<html lang="ja">
<head>

  <!-- 文字コード -->
  <meta charset="UTF-8">

  <!-- スマートフォン表示対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>PDFをモーダルウインドウに表示する方法</title>

  <!-- CSSファイルを読み込み -->
  <link rel="stylesheet" href="style.css">

</head>
<body>

  <!-- PDFモーダルを開く操作エリア -->
  <div class="pdf-modal-window_wrap">

    <!-- 操作エリアのタイトル -->
    <div class="pdf-modal-window_title">
      PDFをモーダルで表示
    </div>

    <!-- 操作エリアの説明文 -->
    <p class="pdf-modal-window_text">
      ボタンをクリックすると、モーダルウインドウ内でPDFを閲覧できます。
    </p>

    <!-- PDFモーダルを開くボタン -->
    <button
      class="pdf-modal-window_open"
      type="button"
      data-pdf-modal-open>
      PDFを表示
    </button>

  </div>

  <!-- モーダル背景 -->
  <div
    class="pdf-modal-window_overlay"
    data-pdf-modal-overlay>

    <!-- モーダル本体 -->
    <div
      class="pdf-modal-window_modal"
      role="dialog"
      aria-modal="true"
      aria-label="PDF表示モーダル">

      <!-- モーダルを閉じるボタン -->
      <button
        class="pdf-modal-window_close"
        type="button"
        data-pdf-modal-close
        aria-label="閉じる">
        ×
      </button>

      <!-- PDF表示エリア -->
      <div class="pdf-modal-window_frame">

        <!--
          【PDFファイルの設置方法】

          1. sampleフォルダ内に「pdf」フォルダを作成する。
          2. 表示したいPDFファイルをpdfフォルダへ配置する。
          3. このサンプルでは「sample.pdf」というファイル名を使用する。
          4. 別のPDFを使用する場合は、src属性のファイル名を書き換える。

          ファイル構成
          sample/
          ├── index.html
          ├── style.css
          ├── script.js
          └── pdf/
              └── sample.pdf

          例
          pdf/manual.pdf を表示する場合
          src="pdf/manual.pdf"

          PDFファイル自体はサンプル一式のZIPには含まれないため、
          利用者自身で用意してpdfフォルダへ配置する。
        -->
        <iframe
          src="pdf/sample.pdf"
          title="PDFサンプル">
        </iframe>

      </div>

    </div>

  </div>

  <!-- JavaScriptファイルを読み込み -->
  <script src="script.js"></script>

</body>
</html>

/* ページ全体 */
body{
  margin:0; /* ページ外側の余白をなくす */
  padding:40px 20px; /* 上下40px・左右20pxの余白。値を大きくするとページ端の余白が広がる */
  background:#ffffff; /* ページ全体の背景色 */
  color:#111827; /* ページ全体の基本文字色 */
  font-family:sans-serif; /* ページ全体のフォント */
  box-sizing:border-box; /* paddingと枠線を要素サイズに含める */
}

/* PDFモーダルを開く操作エリア */
.pdf-modal-window_wrap{
  max-width:700px; /* 最大横幅。値を大きくすると操作エリアが広がる */
  margin:40px auto; /* 上下40pxの余白と左右中央配置 */
  padding:32px; /* 内側余白。値を大きくすると内容周囲の余白が広がる */
  border:1px solid #e5e7eb; /* 枠線の太さと色 */
  border-radius:18px; /* 角丸。値を大きくすると丸みが強くなる */
  background:#f8fafc; /* 操作エリアの背景色 */
  text-align:center; /* タイトル・説明文・ボタンを中央揃え */
  box-sizing:border-box; /* paddingと枠線を横幅に含める */
}

/* 操作エリアのタイトル */
.pdf-modal-window_title{
  margin:0 0 12px; /* 下側12pxの余白 */
  font-size:22px; /* 文字サイズ。値を大きくするとタイトルが大きくなる */
  font-weight:700; /* 文字の太さ */
  line-height:1.5; /* 行間。値を大きくすると行間が広がる */
}

/* 操作エリアの説明文 */
.pdf-modal-window_text{
  margin:0 0 24px; /* 下側24pxの余白 */
  color:#4b5563; /* 説明文の文字色 */
  font-size:16px; /* 説明文の文字サイズ */
  line-height:1.8; /* 行間。値を大きくすると行間が広がる */
}

/* PDFモーダルを開くボタン */
.pdf-modal-window_open{
  padding:12px 24px; /* ボタン内側の上下・左右余白。値を大きくするとボタンが大きくなる */
  border:none; /* ボタンの枠線を非表示 */
  border-radius:8px; /* ボタンの角丸。値を大きくすると丸みが強くなる */
  background:#2563eb; /* ボタンの背景色 */
  color:#ffffff; /* ボタンの文字色 */
  font-size:16px; /* ボタンの文字サイズ */
  font-weight:700; /* ボタン文字の太さ */
  line-height:1.5; /* ボタン文字の行間 */
  cursor:pointer; /* マウスカーソルを指型へ変更 */
}

/* モーダル背景 */
.pdf-modal-window_overlay{
  display:none; /* 初期状態ではモーダルを非表示 */
  position:fixed; /* モーダル背景を画面全体へ固定 */
  inset:0; /* 上下左右を0にして画面全体へ広げる */
  z-index:9999; /* 他の要素より前面へ表示 */
  align-items:center; /* モーダル本体を縦中央へ配置 */
  justify-content:center; /* モーダル本体を横中央へ配置 */
  padding:20px; /* 画面端との余白。値を大きくすると端との間隔が広がる */
  background:rgba(0,0,0,.6); /* 背景色。最後の.6を大きくすると暗く、小さくすると薄くなる */
  box-sizing:border-box; /* paddingを画面幅に含める */
}

/* モーダル表示状態 */
.pdf-modal-window_overlay.is-active{
  display:flex; /* 表示用クラスが付いた時にモーダルを表示 */
}

/* モーダル本体 */
.pdf-modal-window_modal{
  position:relative; /* 閉じるボタンの絶対配置基準 */
  width:100%; /* 画面幅に合わせて縮小 */
  max-width:920px; /* 最大横幅。値を大きくするとモーダルが広がる */
  padding:52px 20px 20px; /* 上52px・左右20px・下20pxの内側余白 */
  border-radius:18px; /* モーダル本体の角丸 */
  background:#ffffff; /* モーダル本体の背景色 */
  box-shadow:0 24px 60px rgba(0,0,0,.25); /* モーダルの影。数値を大きくすると影が広がる */
  box-sizing:border-box; /* paddingを横幅に含める */
  animation:pdf-modal-window_show .3s ease forwards; /* 0.3秒で表示。値を大きくすると遅く、小さくすると速くなる */
}

/* モーダルを閉じるボタン */
.pdf-modal-window_close{
  position:absolute; /* モーダル右上へ固定配置 */
  top:12px; /* 上端からの位置。値を大きくすると下へ移動する */
  right:12px; /* 右端からの位置。値を大きくすると左へ移動する */
  width:38px; /* ボタンの横幅。値を大きくするとボタンが大きくなる */
  height:38px; /* ボタンの高さ。値を大きくするとボタンが大きくなる */
  padding:0; /* ボタン内側の余白をなくす */
  border:none; /* ボタンの枠線を非表示 */
  border-radius:50%; /* ボタンを円形にする */
  background:#111827; /* ボタンの背景色 */
  color:#ffffff; /* ×印の文字色 */
  font-size:24px; /* ×印の文字サイズ */
  line-height:1; /* ×印の行間を詰める */
  cursor:pointer; /* マウスカーソルを指型へ変更 */
}

/* PDF表示エリア */
.pdf-modal-window_frame{
  width:100%; /* モーダル幅に合わせて縮小 */
  height:70vh; /* 画面高さの70%。値を大きくするとPDF表示エリアが高くなる */
  min-height:420px; /* 最小高さ。値を大きくすると小さい画面でも高く表示される */
}

/* PDF表示用iframe */
.pdf-modal-window_frame iframe{
  display:block; /* iframe下の不要な余白をなくす */
  width:100%; /* 表示エリアの横幅いっぱいに広げる */
  height:100%; /* 表示エリアの高さいっぱいに広げる */
  border:none; /* iframeの枠線を非表示 */
  border-radius:12px; /* PDF表示エリアの角丸 */
  background:#ffffff; /* PDF読み込み前の背景色 */
}

/* モーダル表示アニメーション */
@keyframes pdf-modal-window_show{

  /* アニメーション開始時 */
  from{
    opacity:0; /* 完全に透明な状態から開始 */
    transform:scale(.95); /* 95%の大きさから開始。値を小さくすると拡大幅が大きくなる */
  }

  /* アニメーション終了時 */
  to{
    opacity:1; /* 完全に表示 */
    transform:scale(1); /* 通常サイズへ拡大 */
  }

}

/* 画面幅640px以下 */
@media (max-width:640px){

  /* スマートフォン用の操作エリア */
  .pdf-modal-window_wrap{
    padding:24px 18px; /* 上下24px・左右18pxへ余白を縮小 */
  }

  /* スマートフォン用のモーダル本体 */
  .pdf-modal-window_modal{
    padding:52px 14px 14px; /* 閉じるボタン分の上余白と左右・下余白を設定 */
  }

  /* スマートフォン用のPDF表示エリア */
  .pdf-modal-window_frame{
    height:60vh; /* 画面高さの60%。スマートフォンで縦に収まりやすくする */
    min-height:320px; /* スマートフォンでの最小高さ */
  }

}

// PDFモーダルを開くボタンを取得
const pdfModalWindowOpen=document.querySelector(
  "[data-pdf-modal-open]"
);

// PDFモーダルを閉じるボタンを取得
const pdfModalWindowClose=document.querySelector(
  "[data-pdf-modal-close]"
);

// モーダル背景を取得
const pdfModalWindowOverlay=document.querySelector(
  "[data-pdf-modal-overlay]"
);

// PDFを表示ボタンをクリックした時
pdfModalWindowOpen.addEventListener("click",function(){

  // モーダル背景へ表示用クラスを追加
  pdfModalWindowOverlay.classList.add("is-active");

});

// 閉じるボタンをクリックした時
pdfModalWindowClose.addEventListener("click",function(){

  // モーダル背景から表示用クラスを削除
  pdfModalWindowOverlay.classList.remove("is-active");

});

// モーダル背景をクリックした時
pdfModalWindowOverlay.addEventListener("click",function(event){

  // モーダル本体ではなく背景部分をクリックした場合だけ閉じる
  if(event.target===pdfModalWindowOverlay){

    // モーダル背景から表示用クラスを削除
    pdfModalWindowOverlay.classList.remove("is-active");

  }

});

コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

Q ダウンロードしたけど、これをネット上で動かすにはどうするの？

Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。

InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではPDFを表示するボタン、モーダルウインドウ、PDF表示用のiframeを作成し、CSSではモーダルの大きさや配置、背景、閉じるボタン、PDF表示エリア、表示アニメーションを設定します。JavaScriptでは「PDFを表示」ボタンでモーダルを開き、「×」ボタンまたは背景部分のクリックで閉じる処理を行います。

モーダル内へ表示するPDFファイルはサンプル一式のZIPには含まれていません。利用者自身でPDFファイルを用意し、sampleフォルダ内に「pdf」フォルダを作成して配置します。このサンプルではindex.htmlからpdf/sample.pdfを読み込む構成になっています。

sample/
├── index.html
├── style.css
├── script.js
└── pdf/
    └── sample.pdf

※pdf/フォルダとsample.pdfはサンプル一式のZIPには含まれていません。サンプルを使用するときに利用者自身で作成・配置してください。

各ファイルの役割
index.htmlはPDFモーダル全体を構成するファイルです。「PDFをモーダルで表示」のタイトル、説明文、「PDFを表示」ボタン、モーダル本体、閉じるボタン、PDF表示用のiframeを配置しています。表示するPDFファイルはiframeのsrc="pdf/sample.pdf"で指定しています。

style.cssは操作エリアとモーダルウインドウのデザインを設定するファイルです。操作エリアやモーダルの横幅、余白、背景色、角丸、影、閉じるボタンの大きさや位置、PDF表示エリアの高さ、モーダル表示時のアニメーションなどを設定しています。

script.jsはモーダルウインドウの開閉を制御するファイルです。「PDFを表示」ボタンをクリックするとis-activeクラスを追加してモーダルを表示し、「×」ボタンまたは背景部分をクリックするとis-activeクラスを削除してモーダルを閉じます。

pdf/sample.pdfはモーダルウインドウ内へ表示するPDFファイルです。このファイルはZIPには含まれていないため、利用者自身で用意します。

設置方法・使い方
sampleフォルダへindex.html・style.css・script.jsを配置します。次にsampleフォルダ内へpdfフォルダを作成してください。表示したいPDFファイルを用意し、sample.pdfというファイル名でpdfフォルダへ配置します。これでsample/pdf/sample.pdfという配置になります。

別のファイル名を使用する場合は、index.htmlのiframeにあるsrc="pdf/sample.pdf"も変更します。たとえばmanual.pdfを使用する場合は、PDFをsample/pdf/manual.pdfへ配置し、iframeをsrc="pdf/manual.pdf"へ変更してください。

PDFを配置したあと、sample/index.htmlをブラウザで開きます。「PDFを表示」ボタンをクリックすると、pdfフォルダへ配置したPDFがモーダルウインドウ内に表示されます。「×」ボタンまたはモーダル外側の背景部分をクリックするとモーダルを閉じます。

カスタマイズできる内容
index.htmlでは「PDFをモーダルで表示」のタイトル、説明文、「PDFを表示」ボタンの文字、iframeのsrc属性とtitle属性を変更できます。表示するPDFを変更する場合は、pdfフォルダへPDFファイルを配置し、src属性を実際のファイル名に合わせて変更します。

style.cssでは操作エリアの横幅や余白、背景色、枠線、角丸、ボタンの色や大きさ、モーダル背景の濃さ、モーダル本体の横幅や余白、角丸、影、PDF表示エリアの高さ、閉じるボタンの大きさや位置、表示アニメーションの速度を変更できます。

数値調整
style.css
max-width:700px;
PDFを開く操作エリアの最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。

margin:40px auto;
操作エリアの上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。

padding:32px;
操作エリアの内側余白です。値を大きくすると内容と枠線の間隔が広がり、小さくすると狭くなります。

border-radius:18px;
操作エリアとモーダル本体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

font-size:22px;
操作エリアのタイトルの文字サイズです。値を大きくすると文字が大きくなり、小さくすると小さくなります。

margin:0 0 24px;
説明文の下側余白です。24pxを大きくすると「PDFを表示」ボタンとの間隔が広がり、小さくすると狭くなります。

padding:12px 24px;
「PDFを表示」ボタンの内側余白です。上下の12pxを大きくするとボタンが縦に大きくなり、左右の24pxを大きくすると横に広がります。

padding:20px;
モーダル背景の画面端との余白です。値を大きくするとモーダルと画面端の間隔が広がり、小さくすると狭くなります。

max-width:920px;
モーダル本体の最大横幅です。値を大きくするとモーダルが横に広がり、小さくすると狭くなります。

padding:52px 20px 20px;
モーダル本体の内側余白です。上側の52pxは閉じるボタンを配置するための余白で、左右と下側には20pxの余白を設定しています。

top:12px;・right:12px;
「×」ボタンの位置です。topの値を大きくすると下へ移動し、rightの値を大きくすると左へ移動します。

width:38px;・height:38px;
「×」ボタンの横幅と高さです。値を大きくするとボタンが大きくなり、小さくすると小さくなります。

height:70vh;
PDF表示エリアの高さです。画面高さの70％を基準にしており、値を大きくすると表示領域が高くなり、小さくすると低くなります。

min-height:420px;
PDF表示エリアの最小高さです。値を大きくすると最低限確保される高さが大きくなり、小さくすると低くなります。

border-radius:12px;
PDF表示用iframeの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

animation:pdf-modal-window_show .3s ease forwards;
モーダルを表示するときのアニメーション時間です。.3sは0.3秒を表します。値を大きくするとゆっくり、小さくすると速く表示されます。

transform:scale(.95);
表示アニメーション開始時のモーダルの大きさです。.95は通常サイズの95％を表します。値を小さくすると表示開始時と終了時の拡大幅が大きくなります。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのモーダル本体にはwidth:100%とmax-width:920pxを指定しているため、画面幅が狭くなるとモーダルも画面に合わせて縮小します。PDF表示用iframeにはwidth:100%とheight:100%を指定しており、PDF表示エリアの大きさに合わせて表示されます。

画面幅640px以下ではメディアクエリが適用され、操作エリアの余白がpadding:24px 18px;、モーダル本体の余白がpadding:52px 14px 14px;へ変更されます。PDF表示エリアもheight:60vh;、min-height:320px;へ変更されるため、スマートフォン・タブレット・PCで利用できます。