Zenn
🖼️

【CSS】モーダルウィンドウ&スクロールバーのデザイン変更

2022/09/17に公開
CSS
JavaScript
初心者
tech

はじめに

下記のような、ボタンを押すと表示されるモーダルウィンドウを制作します。
jQueryによって簡単にフェードイン、フェードアウトでポップアップします。
内部のコンテンツが長くなった場合、ウィンドウ内をスクロールできるようなデザインにしたいと思います。
また、モーダルウィンドウを閉じる際は外枠をクリックするか、ウィンドウ内の閉じるボタンから閉じるような処理にしたいと思います。

完成したもの

詳しくは下記のCodeSandBoxから見ていただければと思います。実際に動作確認しながら見られるのでおすすめです。
https://codesandbox.io/s/modal-window-0029rf?file=/index.html
jQueryを使用します。HTMLのheadタグにインポートしておいてください。

html
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Modal Window</title>
    <link rel="stylesheet" href="style.css" />
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  </head>

  <body>
    <input
      type="button"
      class="button"
      value="Modal Window"
      onclick="buttonClick()"
    />

    <div class="modal">
      <div class="modal_bg js-modal-close"></div>
      <div class="modalScroll">
        <div class="ScrollContent">
          <div class="modal_content">
            <p>
              Click on the outer frame to close
              <h1>Content1</h1>
              <h1>Content2</h1>
              <h1>Content3</h1>
              <h1>Content4</h1>
            </p>
            <a class="js-modal-close" href="">close</a>
          </div>
        </div>
      </div>
    </div>

    <script>
      function buttonClick() {
        $(".modal").fadeIn();
      }

      $(".js-modal-close").on("click", function () {
        $(".modal").fadeOut();
        return false;
      });
    </script>
  </body>
css
	html {
  height: 100%;
}

body {
  background: linear-gradient(to right, rgb(82, 72, 216), rgb(214, 173, 106));
  height: 100%;
  margin: 0;
}

.button {
  font-size: 24px;
  color: #fff;
  border: 4px solid #fff;
  background: transparent;
  line-height: 2;
  width: 300px;
  height: 120px;
  transition: 0.5s;
}

.button:hover {
  border: 4.3px solid #fff;
  width: 310px;
  height: 130px;
}

.button,
.modalScroll,
.ScrollContent {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.modal {
  display: none;
  height: 100vh;
  position: fixed;
  top: 0;
  width: 100%;
}
.modal_bg {
  background: rgba(0, 0, 0, 0.32);
  height: 100vh;
  position: absolute;
  width: 100%;
}

.js-modal-close {
  color: #555;
}

.modalScroll {
  background: #fff;
  height: 400px;
  width: 400px;
  max-height: 800px;
  padding: 20px;
  border-radius: 20px;
}
.ScrollContent {
  overflow-y: scroll;
  height: 350px;
  width: 95%;
  border-radius: 20px;
}
::-webkit-scrollbar {
  border-radius: 10px;
  width: 10px;
}
::-webkit-scrollbar-thumb {
  background-color: #b6b6b6;
  border-radius: 10px;
}

.modal_content h1,
.modal_content {
  color: rgb(49, 49, 49);
  text-align: center;
  text-align: center;
  padding-top: 150px;
  padding-bottom: 150px;
}

ポイント

①ボタンの用意、モーダルウィンドウの準備

今回のモーダルウィンドウの実装ですが、構造がやや複雑でネストが多くなるので、少し段階を踏んで解説しようと思います。

まずは普通にボタンを実装し、クリックしたらJavaScriptの関数を呼び出します。
また、モーダルウィンドウ表示予定の場所も用意しておきます。
一番のポイントはモーダルウィンドウのCSSでdisplay: none;を記述することでデフォルトでは非表示にすることです。

html
<input
  type="button"
  class="button"
  value="Modal Window"
  onclick="buttonClick()"
/>

<div class="modal">
    <!-- モーダルウィンドウ要素 -->
</div>
css
.modal {
  display: none;
  height: 100vh;
  position: fixed;
  top: 0;
  width: 100%;
}
JavaScript
<!-- ボタンクリックしたら実行される。モーダルウィンドウをフェードインで表示 -->
function buttonClick() {
  $(".modal").fadeIn();
}

②モーダルウィンドウの背景を作成

まずはポップアップのウィンドウより先にウィンドウの背景を制作します。
モーダルウィンドウの外をクリックしたら、モーダルウィンドウを閉じる処理も実装します。

html
<div class="modal">
  <div class="modal_bg js-modal-close"></div>
</div>
css
.modal_bg {
  background: rgba(0, 0, 0, 0.32);  /* メインコンテンツを暗転させる */
  height: 100vh;
  position: absolute;
  width: 100%;
}
JavaScript
<script>
  <!-- このクラスを持ったタグをクリックしたら実行。ウィンドウをフェードアウト -->
  $(".js-modal-close").on("click", function () {
    $(".modal").fadeOut();
    return false;
  });
</script>

③モーダルウィンドウの表示を作る

ようやくモーダルウィンドウの内部を作っていきます。先ほどの工程で制作した背景と同じくmodalクラスのdivタグ内に追加していきます。

今回ややこしいのはmodalScrollクラスとScrollContentクラスの違いです。
前者はウィンドウ自体の大きさで、後者は内部に表示されるコンテンツのサイズで、スクロールされる部分の大きさです。

html
<div class="modalScroll">
   <div class="ScrollContent">
        <div class="modal_content">
          <p>
          Click on the outer frame to close
          <h1>Content1</h1>
          <h1>Content2</h1>
          <h1>Content3</h1>
          <h1>Content4</h1>
          </p>
          <a class="js-modal-close" href="">close</a>
        </div>
     </div>
</div>
css
.modalScroll {
  background: #fff;  /* ウィンドウの背景色 */
  height: 400px;  /* ウィンドウのサイズはお好みでvh、vwを使用してください */
  width: 400px;
  max-height: 800px;
  padding: 20px;
  border-radius: 20px;  /* 角を丸くします */
}

/* 画面の中央に寄せるCSS。ウィンドウとボタンに適応 */
.button,
.modalScroll,
.ScrollContent {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* ウィンドウ内のコンテンツ。スクロールの範囲はここになります。 */
.ScrollContent {
  overflow-y: scroll;  /* コンテンツ量が多くなってもスクロールできるようになります */
  height: 350px;  /* ウィンドウ内部のコンテンツの高さ */
  width: 95%;
  border-radius: 20px;
}

④スクロールバーのデザインを変更する

ウィンドウがシンプルな分、スクロールバーがデフォルトだと浮いてしまうのでデザインを変更します。

css
::-webkit-scrollbar {
  border-radius: 10px;
  width: 10px;  /* スクロールバーの幅 */
}

/* スクロールバーのツマミ部分 */
::-webkit-scrollbar-thumb {
  background-color: #b6b6b6;  /* ツマミの色を変更 */
  border-radius: 10px;  /* 角を丸くする */
}

まとめ

ネストが多く、多少複雑ではありましたが、モーダルウィンドウとスクロールバーのデザイン変更が実装できたかと思います。

今回のモーダルウィンドウ実装について調べると結構jQueryの記事が多く、それらを参考にして制作しています。ですが、React等がおそらく現代の主流なので、そもそも技術選定が必要だなと感じました…。
今後はもっと主流な技術を身に受けるよう意識します…。

Discussion