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

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

iframeをモーダルウインドウに表示する方法を紹介します。このサンプルでは、ボタンをクリックすると画面全体に半透明の背景を表示し、その中央にモーダルウインドウを開いてiframe内へWebページを表示します。通常のページ内へiframeを直接配置するのではなく、必要なときだけモーダルとして表示できるため、元のページを表示したまま別のWebページを確認できる構成です。

「iframeを表示」ボタンをクリックするとモーダルウインドウが表示され、「×」ボタンまたはモーダル外側の背景部分をクリックすると閉じます。モーダルが開く際には、拡大しながら表示されるアニメーションも設定しています。サービスの案内ページや補足ページ、別ページの内容などを必要なタイミングで表示したい場合に利用でき、会員サイトや管理画面、商品・サービスの紹介ページなどにも応用できます。

HTMLではiframeに表示するURLやボタンの文章を変更でき、CSSではモーダルウインドウの最大横幅、余白、背景色、角丸、影、iframeの表示サイズなどを調整できます。iframe部分は横幅に合わせて縮小され、画面幅640px以下ではモーダルの余白も調整されるため、スマートフォン・タブレット・PCで利用できます。HTML・CSS・バニラJavaScriptで実装するため、iframeをモーダル表示する基本的な仕組みを確認したい場合にも利用しやすいサンプルです。

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

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

デモ

「iframeを表示」をクリックするとモーダルウインドウ内にWebページが表示され、「×」ボタンまたは背景部分をクリックすると閉じます。

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

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

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

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

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

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

</head>
<body>

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

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

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

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

  </div>

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

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

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

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

        <!--
          iframeで表示するWebページ

          src属性へ表示したいページのURLを指定する。
          下記URLを書き換えると、モーダル内へ表示するページを変更できる。

          例
          src="https://example.com/"

          外部サイトによっては、セキュリティ設定により
          iframe内で表示できない場合がある。
        -->
        <iframe
          src="https://maruhinoto.com/example/"
          title="iframeサンプル">
        </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と枠線を要素サイズに含める */
}

/* iframeモーダルを開く操作エリア */
.iframe-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と枠線を横幅に含める */
}

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

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

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

/* モーダル背景 */
.iframe-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を画面幅に含める */
}

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

/* モーダル本体 */
.iframe-modal-window_modal{
  position:relative; /* 閉じるボタンの絶対配置基準 */
  display:flex; /* iframeを中央配置するためのFlexbox */
  width:100%; /* 画面幅に合わせて縮小 */
  max-width:900px; /* 最大横幅。値を大きくするとモーダルが広がる */
  padding:32px; /* 内側余白。値を大きくするとiframe周囲の余白が広がる */
  border-radius:18px; /* モーダル本体の角丸 */
  background:#ffffff; /* モーダル本体の背景色 */
  box-shadow:0 24px 60px rgba(0,0,0,.25); /* モーダルの影。数値を大きくすると影が広がる */
  box-sizing:border-box; /* paddingを横幅に含める */
  align-items:center; /* iframeを縦中央へ配置 */
  justify-content:center; /* iframeを横中央へ配置 */
  animation:iframe-modal-window_show .3s ease forwards; /* 0.3秒で表示。値を大きくすると遅く、小さくすると速くなる */
}

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

/* iframe表示エリア */
.iframe-modal-window_frame{
  width:100%; /* モーダル幅に合わせて縮小 */
  max-width:680px; /* iframe表示エリアの最大横幅 */
  aspect-ratio:16 / 9; /* 横16：縦9の表示比率 */
  margin:0 auto; /* 左右中央配置 */
}

/* iframe本体 */
.iframe-modal-window_frame iframe{
  display:block; /* iframe下の不要な余白をなくす */
  width:100%; /* 表示エリアの横幅いっぱいに広げる */
  height:100%; /* 表示エリアの高さいっぱいに広げる */
  border:1px solid #e5e7eb; /* iframeの枠線 */
  border-radius:12px; /* iframeの角丸 */
  background:#ffffff; /* iframe読み込み前の背景色 */
  box-sizing:border-box; /* 枠線をサイズに含める */
}

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

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

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

}

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

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

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

  /* スマートフォン用の閉じるボタン */
  .iframe-modal-window_close{
    top:10px; /* 上端から10pxの位置へ配置 */
    right:10px; /* 右端から10pxの位置へ配置 */
  }

}

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

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

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

// モーダルを開くボタンをクリックした時
iframeModalWindowOpen.addEventListener("click",function(){

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

});

// モーダルを閉じるボタンをクリックした時
iframeModalWindowClose.addEventListener("click",function(){

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

});

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

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

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

  }

});

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

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

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

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

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではモーダルウインドウを開くボタン、画面全体を覆う背景、モーダル本体、Webページを表示するiframeを配置します。CSSではモーダルのサイズや位置、背景色、角丸、影、iframeの表示領域、表示時のアニメーションなどを設定します。JavaScriptでは「iframeを表示」ボタン、「×」ボタン、背景部分のクリックを判定し、is-activeクラスを追加・削除してモーダルウインドウを開閉します。iframeへ表示するWebページのURLは利用者自身で用意して、index.htmlのsrc属性へ設定します。

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

各ファイルの役割
index.htmlはiframeを表示するモーダルウインドウを構成するファイルです。「iframeをモーダルで表示」のタイトル、説明文、「iframeを表示」ボタン、「×」ボタン、iframeを配置しています。モーダル内へ表示するWebページを変更する場合は、iframeのsrc属性へ表示したいページのURLを設定します。

style.cssは操作エリア、モーダル背景、モーダル本体、開閉ボタン、iframe表示エリアのデザインを設定するファイルです。最大横幅、余白、背景色、枠線、角丸、影、iframeの表示比率などを変更できます。また、モーダル表示時にはiframe-modal-window_showによって、透明な状態から拡大しながら表示するアニメーションを設定しています。

script.jsはモーダルウインドウの開閉を行うファイルです。「iframeを表示」ボタンをクリックするとモーダル背景へis-activeクラスを追加し、「×」ボタンをクリックするとクラスを削除します。また、モーダル本体ではなく背景部分をクリックした場合にもis-activeクラスを削除してモーダルを閉じます。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを同じ階層で配置します。次に、index.htmlにあるiframeのsrc属性を、モーダルウインドウ内へ表示したいWebページのURLへ変更してください。

たとえば、表示したいページのURLがhttps://example.com/の場合は、iframeを次のように設定します。

<iframe src="https://example.com/" title="iframeサンプル"></iframe>

URLを設定したあと、sample/index.htmlをブラウザで開いてください。「iframeを表示」ボタンをクリックすると画面中央にモーダルウインドウが開き、設定したWebページがiframe内へ表示されます。「×」ボタンまたはモーダル外側の暗い背景部分をクリックするとモーダルウインドウが閉じます。

iframeへ外部サイトを指定する場合、相手側のセキュリティ設定によってはiframe内への表示が許可されていないことがあります。その場合は、このコードのsrcへ正しいURLを設定していてもページを表示できません。

カスタマイズできる内容
index.htmlでは「iframeをモーダルで表示」のタイトル、説明文、「iframeを表示」ボタンの文章、iframeのtitle、iframeへ表示するWebページのURLを変更できます。別のページを表示する場合は、iframeのsrc属性を変更してください。

style.cssでは操作エリアとモーダル本体の最大横幅、内側余白、背景色、枠線、角丸、影、ボタンのサイズや色、モーダル背景の濃さ、iframe表示エリアの最大横幅や縦横比、表示アニメーションの速度などを変更できます。

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

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

padding:32px;
操作エリアとモーダル本体に設定している内側余白です。値を大きくすると内容と端との間隔が広がり、小さくすると狭くなります。

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

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

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

border-radius:8px;
「iframeを表示」ボタンの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

padding:20px;
モーダル背景の内側余白です。値を大きくするとモーダル本体と画面端との間隔が広がります。

background:rgba(0,0,0,.6);
モーダル表示時に画面全体へ重ねる背景色です。最後の.6を大きくすると背景が暗くなり、小さくすると薄くなります。

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

box-shadow:0 24px 60px rgba(0,0,0,.25);
モーダル本体の影です。24pxや60pxなどの値を変更すると、影の位置や広がりを調整できます。

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

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

max-width:680px;
iframe表示エリアの最大横幅です。値を大きくするとiframeの表示領域が広がり、小さくすると狭くなります。

aspect-ratio:16 / 9;
iframe表示エリアの縦横比です。このサンプルでは横16：縦9の比率で表示します。

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

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

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

@media (max-width:640px)
画面幅640px以下でスマートフォン向けの余白へ切り替える基準です。操作エリアをpadding:24px 18px;、モーダル本体をpadding:52px 18px 18px;へ変更し、「×」ボタンを上端・右端から10pxの位置へ配置します。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssでモーダル本体にwidth:100%とmax-width:900px、iframe表示エリアにwidth:100%とmax-width:680pxを指定しているため、画面幅に合わせて表示サイズが縮小します。iframeもwidth:100%とheight:100%によって表示エリアに合わせてサイズが変化します。また、画面幅640px以下では操作エリアとモーダル本体の余白、「×」ボタンの位置を調整しているため、スマートフォン・タブレット・PCで利用できます。