【JavaScript】モーダルウインドウの作り方の要点をまとめた

【JavaScript】モーダルウインドウの作り方の要点をまとめた

はじめに

コジマです。

フロント側の知識が過疎すぎるので、ドットインストールを再開しています。

その中でモーダルウインドウの作り方を学んだのですが、
自分の中で気づきがあったので、要点をさっくりまとめていこうかと思います。

レッスン自体はこちら。(要PREMIUM会員)
https://dotinstall.com/lessons/modal_js

前提

開発OSはMac。
ブラウザはGoogle Chromeとします。

HTML、CSS、JavaScriptの区別はこんな感じで覚えておけば大体間違い無いと思います。

  • HTML:画面の部品を作る
  • CSS:部品の見た目を変える
  • JavaScript:部品に動きをつける

以上を踏まえてやっていきます。

要点

最初に要点を書いていきます。

HTML

HTMLは部品を作ります。
モーダルウインドウに必要な部品は4つ。

  • モーダル画面を開くボタン
  • グレーの透過マスク
  • モーダル画面
  • モーダル画面を閉じるボタン

CSS

CSSは見た目を変えていきます。

  • cursor:pointer;でボタンの上にカーソルがある時指マークに変化
  • rgbaを使用することで透過
  • z-indexで部品の重なりの順番を指定できる
  • transitionでアニメーションをつけられる
  • transformで表示位置をずらす

JavaScript

JavaScriptは部品に動きをつけていきます。

  • document.getElementByIdで動きをつけたいidを取得
  • [取得したid].addEventListener(‘click’,function(){[処理]});でクリック時のイベントを発生させる
  • [取得したid].classNameでクラス名を変えてCSSの適用範囲を変更することで動きを実現

それでは少しずつ作っていくことにしましょう。

作っていく

HTML

部品を作りたい時はdivを使うのが定石ですね。
そこに部品の名前はidで、モーダル画面の動きを実現するためにhiddenというclassを定義することにします。
ボタンはbuttonタグを使って実装することにしましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Modal Sample</title>
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
  <!-- コメントに部品の詳細を記載 -->
  <!-- モーダル画面を開くボタン -->
  <div id="open" class="button">
    <button>モーダルを開く</button>
  </div>

  <!-- グレーの透過マスク -->
  <div id="mask" class="hidden"></div>

  <!-- モーダル画面 -->
  <div id="modal" class="hidden">
    これがモーダル画面です。
    <!-- モーダル画面を閉じるボタン -->
    <div id="close" class="button">
      <button>モーダルを閉じる</button>
    </div>
  </div>
  <script src="js/main.js"></script>
</body>
</html>

見た目はこんな感じになるかと思います。

CSSを当てていないので、マスクはまっさらで何もありません。

続いてCSSを作成していきます。

CSS

コメントをつけていきます。
要点以外にも見た目を整えたところはありますが、
要点に記載したところには[POINT]と書きました。

それぞれの部品にCSSを当て込みました。途中経過です。

@charset "utf-8";

/*ボタンの見た目を整える*/
.button {
  cursor: pointer; /*[POINT] 指マークのカーソル*/

  width :200px; /*横幅200px*/
  height: 50px; /*縦幅50px*/
  font-size: 16px; /*文字を少し大きくする*/
  text-align: center; /*テキスト中央寄せ(横)*/
  line-height: 50px; /*heightに合わせ、テキストを中央寄せ(縦)*/
  margin: 20px auto 0px; /*上に20px,左右中央寄せ,下に0pxの余白*/
  border: 1px solid #000; /*黒1pxの実線で縁を作る*/
  box-shadow: 3px 3px rgba(0,0,0,0.4);/*ちょっと影をつけて立体感を出す*/
  border-radius: 5px; /*ちょっと角を丸くする*/
}

/*ボタンのクリックイベント*/
/*ボタンを押してるっぽい動きをつける*/
.button:active{
  transform: translateY(3px);/*影の分だけ下にずらす*/
  box-shadow: 0px 0px;/*影をなくす*/
}

/*マスクを作成する*/
#mask {
  background: rgba(0,0,0,0.4);/*[POINT]背景を40%の濃さで透過する*/
  /*[POINT]画面全体を覆うようにする*/
  /*[POINT]絶対位置で指定し、上下左右0距離から描画を始めることで画面全体に適用できる*/
  position:fixed;/*絶対位置を指定*/
  top: 0;/*上に0距離から描画を始める*/
  bottom: 0;/*下に0距離から描画を始める*/
  right: 0;/*右に0距離から描画を始める*/
  left: 0;/*左に0距離から描画を始める*/
  z-index: 1;
}

/*モーダル画面*/
#modal {
  background: #ff0;/*背景は白(わかりやすさのため今は白じゃない)*/
  width: 300px; /*横幅を指定*/
  position:absolute;/*絶対位置を指定(スクロールで動く)*/
  top:40px;/*縦に40pxの位置から描画*/
  right: 0px;/*右に0距離から描画を始める*/
  left:0px;/*左に0距離から描画を始める*/
  margin:0 auto; /*左右中央寄せ*/
  padding: 20px;/*内側に余白*/
  z-index: 2;
}

見た目はこんな感じになります。

部品が出揃いました。

maskとmodalのhiddenクラスに最初は非表示にするように
CSS当て込んでいきましょう。

#mask.hidden{
  display:none; /*非表示にする*/
}

#modal.hidden{
  transform: translate(0px,-500px);/*[POINT]マイナス方向に動かして画面外に飛ばしておく*/
}


画面表示をするとこんな感じ

JavaScript

もちろんこのままではいけないので、JavaScriptで
開くボタンをクリックしたらマスクとモーダル画面を表示して、
閉じるボタンをクリックしたらマスクとモーダル画面を非表示にするようにしていきましょう。
そしてCSSでアニメーションをつけましょう。

getElementByIdでIDを取得して、addEventListenerを使ってイベントを定義すればよかったですね。

(function(){
  'use strict';

  //[POINT]idを取得する
  var open = document.getElementById('open');
  var close = document.getElementById('close');
  var mask = document.getElementById('mask');
  var modal = document.getElementById('modal');

  //[POINT]クリックイベントを定義
  open.addEventListener('click',function(){
    //openではマスクとモーダル画面が表示できるようにする
    //[POINT]クラス名を変えてCSSを当て込まないようにする
    mask.className = '';
    modal.className = '';
  });

  close.addEventListener('click',function(){
    //closeではマスクとモーダル画面を非表示にする
    //[POINT]クラス名を再定義し、CSSを当て込む
    mask.className = 'hidden';
    modal.className = 'hidden';
  });

  //モーダル画面外をクリックしてもモーダル画面が閉じるようにする
  mask.addEventListener('click',function(){
    //closeと同じなので、closeのクリックイベントを呼び出せば良い
    close.click(); //このように書くことができる
  });

})();

このようになります。

アニメーションをつけよう

最後にアニメーションをつけていきます。
黄色かった画面も白に戻すことにします。

/*モーダル画面*/
#modal {
  background: #fff;/*背景は白*/
  width: 300px; /*横幅を指定*/
  position:absolute;/*絶対位置を指定(スクロールで動く)*/
  top:40px;/*縦に40pxの位置から描画*/
  right: 0px;/*右に0距離から描画を始める*/
  left:0px;/*左に0距離から描画を始める*/
  margin:0 auto; /*左右中央寄せ*/
  padding: 20px;/*内側に余白*/
  border-radius: 5px; /*ちょっと角を丸くする*/
  border: 1px solid black; /*黒1px実線で縁取り*/
  z-index: 2;
  transition: 0.8s /*[POINT]0.8秒かけて移動させる(アニメーション)*/
}

アニメーションを追加して、見た目も少し整えました

こんな感じになります。

わかりやすいようにカーソルも出しました。
ボタンを押しても画面外を押しても閉じます。
アニメーションもつけました。これにて完成です。

最後に

繰り返しになりますが、要点は以下の通り。

HTML

HTMLは部品を作ります。
モーダルウインドウに必要な部品は4つ。

  • モーダル画面を開くボタン
  • グレーの透過マスク
  • モーダル画面
  • モーダル画面を閉じるボタン

CSS

CSSは見た目を変えていきます。

  • cursor:pointer;でボタンの上にカーソルがある時指マークに変化
  • rgbaを使用することで透過
  • z-indexで部品の重なりの順番を指定できる
  • transitionでアニメーションをつけられる
  • transformで表示位置をずらす

JavaScript

JavaScriptは部品に動きをつけていきます。

  • document.getElementByIdで動きをつけたいidを取得
  • [取得したid].addEventListener(‘click’,function(){[処理]});でクリック時のイベントを発生させる
  • [取得したid].classNameでクラス名を変えてCSSの適用範囲を変更することで動きを実現

本日作ったサンプルは
githubに公開しています。
https://github.com/kojimanotech/modal-sample

よかったら見てみてください!
HTML/CSS/JavaScriptどれも必要になるので、いい勉強材料なのではないかと思います!

以上、コジマでした。


JavaScriptカテゴリの最新記事