コジマノテック エンジニアとしての経験や学習を発信していくブログ

注目キーワード

【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をもっと学びたいエンジニアのためにおすすめのUdemy講座を紹介いたします！

JavaScript初心者向けの講座です。
HTML、CSSと合わせて学ぶことができます。
フロントエンド開発の基本的な知識を網羅的に学ぶことができます。
個人的には著作権表記についても触れているところが推せますね。
ウェブ開発入門完全攻略コース – HTML/CSS/JavaScript. プログラミングをはじめて学び創れる人へ！

JavaScriptをより深く学びたい人はこちらがおすすめです。
JavaScript初心者を脱するとよりよいコードを書かなければなりません。
つまずきがちなオブジェクト操作や、非同期処理の仕組みについて学ぶこともできるため、JavaScriptの仕組みから深く学ぶことができます。
【JS】ガチで学びたい人のためのJavaScriptメカニズム

気になった人はぜひ見てみてくださいね！

以上、コジマでした。

シェアしよう
ツイートしよう！
気に入ったらフォローしよう

JavaScriptカテゴリの最新記事