モーダルウインドウを表示するトグルスイッチを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

無料ツール

トグルスイッチを自由に作成

ラベル・外枠・サイズ・色・角丸・切り替え速度などを設定して、HTML・CSSを自動生成できます。

テキスト・表示ボタン・サイズ・余白・角丸・背景色・文字色・影などを設定して、HTML・CSS・JavaScriptを自動生成できます。

モーダルウインドウ作成ツールを使う

新しいタブで開きます

モーダルウインドウを表示するトグルスイッチを作る方法

モーダルウインドウを表示するトグルスイッチを作る方法を紹介します。このサンプルでは、トグルスイッチをONにすると画面中央へモーダルウインドウを表示し、モーダル内の「閉じる」ボタンをクリックするとモーダルを閉じると同時にスイッチをOFFへ戻します。ボタンではなくON・OFFを切り替える操作からモーダルを表示したい場合に利用できます。

管理画面の設定項目、会員サイトの機能設定、ECサイトのオプション設定など、スイッチの状態変更に合わせて追加情報や確認内容を表示したい場面に適しています。モーダルウインドウは基本形と同じく画面中央へ表示し、背景を暗くするオーバーレイや外側クリックによる閉じる処理は使用しません。トグルスイッチによる表示操作だけを追加しているため、動作の仕組みも確認しやすい構成です。

HTMLではトグルスイッチとモーダルウインドウの内容、CSSではスイッチのON・OFF状態やモーダルの横幅、余白、色、角丸などを変更できます。JavaScriptではチェックボックスの状態を確認してモーダルの表示を切り替えます。画面幅640px以下では余白を小さくするレスポンシブ対応も行っているため、スマートフォン・タブレット・PCで利用できます。

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

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

デモ

トグルスイッチをONにすると、画面中央にモーダルウインドウが表示されます。「閉じる」ボタンをクリックするとモーダルが閉じ、トグルスイッチもOFFへ戻ります。

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

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

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

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

  <!-- ページタイトル -->
  <title>モーダルウインドウを表示するトグルスイッチ</title>

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

</head>
<body>

  <!-- トグルスイッチ表示エリア -->
  <div class="toggle-modal-window_wrap">

    <!-- タイトル -->
    <div class="toggle-modal-window_title">
      お知らせ表示
    </div>

    <!-- 説明文 -->
    <p class="toggle-modal-window_text">
      トグルスイッチをONにすると、モーダルウインドウが表示されます。
    </p>

    <!-- トグルスイッチ設定項目 -->
    <div class="toggle-modal-window_setting">

      <!-- 設定名 -->
      <label class="toggle-modal-window_setting-name" for="toggle-modal-window-input">
        モーダルを表示する
      </label>

      <!-- トグルスイッチ -->
      <div class="toggle-modal-window_control">

        <!-- ON・OFFを管理するチェックボックス -->
        <input class="toggle-modal-window_input" id="toggle-modal-window-input" type="checkbox">

        <!-- トグルスイッチの外観 -->
        <label class="toggle-modal-window_switch" for="toggle-modal-window-input" aria-label="モーダルウインドウの表示を切り替える">
        </label>

      </div>

    </div>

  </div>

  <!-- モーダルウインドウ -->
  <div class="toggle-modal-window_modal" id="toggle-modal-window-modal" role="dialog" aria-modal="true" aria-labelledby="toggle-modal-window-modal-title">

    <!-- モーダルタイトル -->
    <div class="toggle-modal-window_modal-title" id="toggle-modal-window-modal-title">
      お知らせ
    </div>

    <!-- モーダル説明文 -->
    <p class="toggle-modal-window_modal-text">
      トグルスイッチをONにしたため、モーダルウインドウが表示されました。
    </p>

    <!-- 閉じるボタン -->
    <button class="toggle-modal-window_close" id="toggle-modal-window-close" type="button">
      閉じる
    </button>

  </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; /* ページ全体で使用するフォント */
}

/* 全要素のサイズ計算 */
.toggle-modal-window_wrap,
.toggle-modal-window_wrap *{
  box-sizing:border-box; /* paddingとborderを横幅へ含める */
}

/* トグルスイッチ表示エリア */
.toggle-modal-window_wrap{
  width:100%; /* 画面幅に合わせて横幅を縮小 */
  max-width:700px; /* 最大横幅。値を大きくすると全体が横に広がる */
  margin:40px auto; /* 上下40pxの余白を付けて左右中央へ配置 */
  padding:32px; /* 内側の余白。値を大きくすると余白が広がる */
  border:1px solid #e5e7eb; /* 表示エリアを囲む枠線 */
  border-radius:18px; /* 角丸。値を大きくすると丸みが強くなる */
  background:#f8fafc; /* 表示エリアの背景色 */
}

/* タイトル */
.toggle-modal-window_title{
  margin:0 0 12px; /* 下側12pxの余白。値を大きくすると説明文との間隔が広がる */
  font-size:22px; /* タイトルの文字サイズ。値を大きくすると文字が大きくなる */
  font-weight:700; /* タイトルを太字にする */
  text-align:center; /* タイトルを中央揃えにする */
}

/* 説明文 */
.toggle-modal-window_text{
  margin:0 0 24px; /* 下側24pxの余白。値を大きくすると設定項目との間隔が広がる */
  color:#4b5563; /* 説明文の文字色 */
  line-height:1.8; /* 説明文の行間。値を大きくすると行間が広がる */
  text-align:center; /* 説明文を中央揃えにする */
}

/* トグルスイッチ設定項目 */
.toggle-modal-window_setting{
  display:flex; /* 設定名とスイッチを横並びにする */
  align-items:center; /* 上下中央へ揃える */
  justify-content:space-between; /* 設定名とスイッチを左右へ配置 */
  gap:20px; /* 要素間の間隔。値を大きくすると間隔が広がる */
  padding:18px 20px; /* 上下18px・左右20pxの内側余白 */
  border:1px solid #dbe3ee; /* 設定項目の枠線 */
  border-radius:12px; /* 設定項目の角丸。値を大きくすると丸みが強くなる */
  background:#ffffff; /* 設定項目の背景色 */
}

/* 設定名 */
.toggle-modal-window_setting-name{
  color:#1f2937; /* 設定名の文字色 */
  font-size:16px; /* 設定名の文字サイズ */
  font-weight:700; /* 設定名を太字にする */
}

/* トグルスイッチ全体 */
.toggle-modal-window_control{
  position:relative; /* スイッチ内部の基準位置 */
  flex:0 0 52px; /* 横幅を52pxで固定 */
  width:52px; /* スイッチの横幅。変更する場合は内部サイズも合わせて調整する */
  height:28px; /* スイッチの高さ。変更する場合は内部サイズも合わせて調整する */
}

/* チェックボックス */
.toggle-modal-window_input{
  position:absolute; /* 通常表示から外して配置 */
  width:1px; /* 視覚的に隠すため1pxにする */
  height:1px; /* 視覚的に隠すため1pxにする */
  margin:-1px; /* 表示領域の外へ移動 */
  padding:0; /* 内側余白を削除 */
  overflow:hidden; /* はみ出した部分を非表示 */
  clip:rect(0 0 0 0); /* 視覚的に非表示 */
  clip-path:inset(50%); /* 視覚的に非表示 */
  border:0; /* 枠線を削除 */
  white-space:nowrap; /* 改行を防止 */
}

/* トグルスイッチ */
.toggle-modal-window_switch{
  position:absolute; /* control内へ配置 */
  inset:0; /* 上下左右0で全体へ広げる */
  display:block; /* ブロック要素として表示 */
  width:52px; /* スイッチの横幅 */
  height:28px; /* スイッチの高さ */
  border-radius:999px; /* 十分大きな値でカプセル形状にする */
  background:#cbd5e1; /* OFF時の背景色 */
  cursor:pointer; /* マウスカーソルをポインターにする */
  transition:
    background-color .3s ease,
    box-shadow .3s ease;
  /*
    0.3秒で背景色と影を切り替える。
    値を大きくすると遅くなり、小さくすると速くなる。
  */
}

/* トグルスイッチの丸い部分 */
.toggle-modal-window_switch::before{
  content:""; /* 疑似要素を生成 */
  position:absolute; /* スイッチ内へ配置 */
  top:3px; /* 上から3px。値を大きくすると下へ移動 */
  left:3px; /* 左から3px。値を大きくすると右へ移動 */
  width:22px; /* 丸い部分の横幅 */
  height:22px; /* 丸い部分の高さ */
  border-radius:50%; /* 円形にする */
  background:#ffffff; /* 丸い部分の背景色 */
  box-shadow:0 2px 6px rgba(15,23,42,.22); /* 2pxは縦位置、6pxはぼかし範囲 */
  transition:transform .3s ease; /* 0.3秒で移動。値を大きくするとゆっくりになる */
}

/* ON時のトグルスイッチ */
.toggle-modal-window_input:checked
+ .toggle-modal-window_switch{
  background:#2563eb; /* ON時の背景色 */
}

/* ON時の丸い部分 */
.toggle-modal-window_input:checked
+ .toggle-modal-window_switch::before{
  transform:translateX(24px); /* 右へ24px移動。値を大きくすると移動量が増える */
}

/* キーボード操作時の強調 */
.toggle-modal-window_input:focus-visible
+ .toggle-modal-window_switch{
  box-shadow:0 0 0 4px rgba(37,99,235,.18); /* 4pxは外側の強調範囲 */
}

/* モーダルウインドウ */
.toggle-modal-window_modal{
  display:none; /* 初期状態では非表示 */
  position:fixed; /* 画面を基準に固定 */
  top:50%; /* 上端を画面中央へ配置 */
  left:50%; /* 左端を画面中央へ配置 */
  z-index:9999; /* 他の要素より前面へ表示 */
  width:calc(100% - 40px); /* 画面左右に合計40px分の余白を確保 */
  max-width:420px; /* モーダルの最大横幅。値を大きくすると横に広がる */
  padding:28px; /* モーダル内側の余白。値を大きくすると余白が広がる */
  border-radius:18px; /* モーダルの角丸。値を大きくすると丸みが強くなる */
  background:#ffffff; /* モーダルの背景色 */
  box-shadow:0 20px 40px rgba(0,0,0,.2); /* 20pxは縦位置、40pxはぼかし範囲 */
  text-align:center; /* 内容を中央揃えにする */
  box-sizing:border-box; /* paddingを横幅へ含める */
  transform:translate(-50%,-50%); /* モーダル自身の半分だけ戻して中央配置 */
}

/* モーダル表示時 */
.toggle-modal-window_modal.is-active{
  display:block; /* モーダルを表示 */
}

/* モーダルタイトル */
.toggle-modal-window_modal-title{
  margin:0 0 12px; /* 下側12pxの余白 */
  font-size:22px; /* モーダルタイトルの文字サイズ */
  font-weight:700; /* モーダルタイトルを太字にする */
}

/* モーダル説明文 */
.toggle-modal-window_modal-text{
  margin:0 0 24px; /* 下側24pxの余白 */
  color:#4b5563; /* 説明文の文字色 */
  line-height:1.8; /* 説明文の行間 */
}

/* 閉じるボタン */
.toggle-modal-window_close{
  padding:10px 20px; /* 上下10px・左右20pxの内側余白 */
  border:none; /* 枠線を非表示 */
  border-radius:8px; /* ボタンの角丸。値を大きくすると丸みが強くなる */
  background:#111827; /* ボタンの背景色 */
  color:#ffffff; /* ボタンの文字色 */
  font-weight:700; /* ボタン文字を太字にする */
  cursor:pointer; /* マウスカーソルをポインターにする */
}

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

  /* トグルスイッチ表示エリア */
  .toggle-modal-window_wrap{
    padding:24px 18px; /* スマートフォンでは内側余白を小さくする */
  }

  /* トグルスイッチ設定項目 */
  .toggle-modal-window_setting{
    gap:14px; /* スマートフォンでは要素間を14pxにする */
    padding:16px; /* スマートフォンでは内側余白を16pxにする */
  }

  /* モーダルウインドウ */
  .toggle-modal-window_modal{
    padding:24px 18px; /* スマートフォンではモーダルの余白を小さくする */
  }

}

// トグルスイッチを取得
const toggleModalWindowInput =
  document.getElementById("toggle-modal-window-input");

// モーダルウインドウを取得
const toggleModalWindowModal =
  document.getElementById("toggle-modal-window-modal");

// 閉じるボタンを取得
const toggleModalWindowClose =
  document.getElementById("toggle-modal-window-close");

// トグルスイッチの状態が変わったとき
toggleModalWindowInput.addEventListener("change", () => {

  // ONの場合
  if(toggleModalWindowInput.checked){

    // モーダルを表示
    toggleModalWindowModal.classList.add("is-active");

  }else{

    // OFFの場合はモーダルを非表示
    toggleModalWindowModal.classList.remove("is-active");

  }

});

// 閉じるボタンをクリックしたとき
toggleModalWindowClose.addEventListener("click", () => {

  // モーダルを非表示
  toggleModalWindowModal.classList.remove("is-active");

  // トグルスイッチをOFFへ戻す
  toggleModalWindowInput.checked = false;

});

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。 免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

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

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

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

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

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではトグルスイッチとモーダルウインドウを配置し、CSSではトグルスイッチのON・OFF状態とモーダルのデザインを設定します。JavaScriptではトグルスイッチの状態を確認し、ONの場合はモーダルを表示、OFFの場合は非表示にします。

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

各ファイルの役割
index.htmlはトグルスイッチとモーダルウインドウを構成するファイルです。「お知らせ表示」のタイトル、説明文、設定名、モーダルタイトル、モーダル内の文章、「閉じる」ボタンの文字を変更できます。

style.cssはトグルスイッチ表示エリア、ON・OFFを表すスイッチ、モーダルウインドウ、閉じるボタンのデザインを設定するファイルです。横幅、余白、色、角丸、文字サイズ、影などを変更できます。

script.jsはトグルスイッチとモーダルウインドウを連動させるファイルです。スイッチがONになるとモーダルへis-activeクラスを追加し、OFFになると削除します。「閉じる」ボタンをクリックした場合はモーダルを非表示にし、トグルスイッチもOFFへ戻します。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。index.htmlからstyle.cssとscript.jsが読み込まれます。「モーダルを表示する」のトグルスイッチをONにすると画面中央へモーダルウインドウが表示されます。「閉じる」ボタンをクリックするとモーダルが閉じ、トグルスイッチもOFFへ戻ります。

カスタマイズできる内容
index.htmlでは表示エリアのタイトルや説明文、トグルスイッチ横の設定名、モーダルタイトル、モーダル内の文章、「閉じる」ボタンの文字を変更できます。style.cssではトグルスイッチのOFF時・ON時の色、スイッチの大きさ、モーダルの最大横幅、余白、角丸、背景色、影などを用途に合わせて変更できます。

数値調整
style.css
max-width:700px;
トグルスイッチ表示エリアの最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。

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

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

border-radius:18px;
表示エリアの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

font-size:22px;
表示エリアとモーダルのタイトルに使用している文字サイズです。値を大きくすると文字が大きくなり、小さくすると控えめになります。

gap:20px;
設定名とトグルスイッチの間隔です。値を大きくすると間隔が広がり、小さくすると近くなります。

padding:18px 20px;
トグルスイッチ設定項目の内側余白です。上下の18pxを大きくすると設定項目が高くなり、左右の20pxを大きくすると内容と左右端の間隔が広がります。

width:52px;・height:28px;
トグルスイッチ本体の横幅と高さです。サイズを変更する場合は、内部の丸い部分や移動量も合わせて調整します。

width:22px;・height:22px;
トグルスイッチ内部にある白い丸の大きさです。両方を同じ値にすると円形を維持できます。

transform:translateX(24px);
ONになったときに白い丸を右へ移動する距離です。24pxを大きくすると移動量が増え、小さくすると移動量が減ります。

transition:transform .3s ease;
トグルスイッチ内部の丸が移動する時間です。0.3秒で変化します。値を大きくするとゆっくり、小さくすると速く移動します。

max-width:420px;
モーダルウインドウの最大横幅です。値を大きくするとモーダルが横に広がり、小さくするとコンパクトになります。

padding:28px;
モーダルウインドウの内側余白です。値を大きくすると内容と外周の間隔が広がり、小さくすると狭くなります。

border-radius:18px;
モーダルウインドウの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

box-shadow:0 20px 40px ...
モーダルウインドウの影です。20pxは影の縦方向の位置、40pxはぼかし範囲です。数値を大きくすると影の位置や広がりが大きくなります。

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

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxにより、トグルスイッチ表示エリアが画面幅に合わせて縮小されます。モーダルウインドウはwidth:calc(100% - 40px)とmax-width:420pxを使用し、狭い画面でも左右に余白を残して表示します。また、640px以下では表示エリアをpadding:24px 18px;、設定項目をgap:14px;とpadding:16px;、モーダルをpadding:24px 18px;へ変更しているため、スマートフォン・タブレット・PCで利用できます。