【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タグを使って実装することにしましょう。

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

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

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

CSS

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

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

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

部品が出揃いました。

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

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

JavaScript

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

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

このようになります。

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

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

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

こんな感じになります。

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

最後に

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

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カテゴリの最新記事