【Javascript】Javascriptでモーダルウィンドウを作ろう
今回はJavascriptによるモーダルウィンドウ作成の一例をメモします。他にも色々と作り方はあると思いますが、私の様なまだまだ駆け出しの初心者に自作は難しいので、一つの作成例からしっかり要所を抑えておきたいですね(｀･ω･´)
目次
モーダルウィンドウってなに？
私も最近まで「モーダルウィンドウ」という言葉を知りませんでしたが、これはネットサーフィンをしてるとどこかで見たことある機能だと思います。
モーダルウィンドウはボタンを押すと、今まで開いていたウィンドウ画面とは別のウィンドウが開く機能です。
厳密にいえば、「ウィンドウ内で指定された操作を完了、またはキャンセルするまで他のウィンドウを開くことができないウィンドウ」という機能です。
モーダルウィンドウの役割
①警告メッセージ
ファイルの消去などユーザーが間違った操作をした時にダメージが大きい操作に対して、警告メッセージを表示する形で利用されます。別のウィンドウを確認画面にしておくとユーザーの誤った操作を防止できそうですね。
②エラーメッセージ
他のウェブサイトで使用中のファイルを消去しようとする際など、ウェブサイトやアプリケーションで行えない操作をする時にエラーメッセージを表示するなどのケースで利用されます。
③ロード中
ユーザがサイト内のボタンをクリックした結果、指定した操作の処理が行われている事に気づかず、もう一度同じボタンをクリックしてしまうことがあります。その際に同じボタンを押すことを防ぐためにロード中というメッセージが利用されます。
モーダルウィンドウの使用には多種多様な用途を持たすことができますが、今回はそこまで複雑な機能をもったものは作成せず、「ボタンを押したらメッセージが表示され、”閉じる”のボタンを押したらウィンドウが閉じる」というシンプルなものを作成してみます。
モーダルウィンドウ作成の一例
See the Pen
mdVRbOx by egg (@egg0522sei)
on CodePen.
「詳細をみる」のボタンを押すと別のウィンドウが開き、「閉じる」のボタンを押すと元のウィンドウに戻るプログラムができました。HTML、CSS、Javascriptの要所をかいつまんで解説していきます。
HTML
|
1 2 3 4 5 6 7 8 9 10 |
<div id="open"> 詳細をみる </div> <div id="mask" class="hidden"></div> <section id="modal" class="hidden"> <p>モータルウィンドウのテストです。閉じるのボタンをおしたらウィンドが閉じます</p> <div id="close"> 閉じる </div> </section> |
詳細ボタン
|
1 2 3 |
<div id="open"> 詳細をみる </div> |
マスク
|
1 |
<div id="mask" class="hidden"></div> |
モーダル
|
1 2 3 4 5 6 |
<section id="modal" class="hidden"> <p>モータルウィンドウのテストです。閉じるのボタンをおしたらウィンドが閉じます</p> <div id="close"> 閉じる </div> </section> |
HTMLは大きく分けて、この3つのパーツから成り立っています。続いてCSSを見ていきます。
CSS
|
1 2 3 4 5 6 7 8 9 |
#open,#close{ cursor:pointer; width:200px; border:1px solid #ccc; border-radius:4px; text-align: center; padding:12px 0; margin:16px auto 0; } |
|
1 2 3 4 5 6 7 8 9 |
#mask{ background:rgba(0,0,0,0.4); position:fixed; top:0; bottom:0; left:0; right:0; z-index:1; } |
画面全体を覆う、マスク部分です。「position:fixed;」によって、画面上に固定、「background:rgba;」によって半透明にしています。また「z-index:1;」はモーダルウィンドウより背面にする為に設定しています。モーダルウィンドウにも「z-index」を設定しますが、モーダルの数値よりも小さい値を設定しておくことが重要です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
#modal{ background:#fff; width:300px; padding:20px; border-radius:4px; position:absolute; top:40px; left:0; right:0; margin:0 auto; transition:transform 0.4s; z-index:2; } |
モーダルウィンドウのCSS部分です。ここで重要なのは絶対配置にする「position:absolute;」とマスクより前面に配置する「z-index:(maskより大きい値);」です。「top」などの値は表示位置を表し、これは好みの場所に配置できます。
ただひとつ注意すべき点があり、「margin:0 auto;」の部分ですが、これは画面中央に配置する為に記述しています。
|
1 2 3 4 5 6 7 |
#mask.hidden{ display:none; } #modal.hidden{ transform:translate(0,-500px); } |
このCSSは「idの”mask”と”modal”にclass=”hidden”がついている時のみに適用するデザイン」という意味になります。
「mask」には、「display:none;」により非表示になり、「modal」には「transform」によってｙ軸に-500px、つまり画面上見えないところに配置して隠しています。
Javascript
それでは最後にJavascriptによって動きを追加していきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
// JavaScript Document 'use strict' { const open = document.getElementById('open'); const close = document.getElementById('close'); const modal = document.getElementById('modal'); const mask = document.getElementById('mask'); open.addEventListener('click',()=>{ modal.classList.remove('hidden'); mask.classList.remove('hidden'); }); close.addEventListener('click',()=>{ modal.classList.add('hidden'); mask.classList.add('hidden'); }); mask.addEventListener('click',()=>{ close.click(); }); } |
それぞれの変数作成
|
1 2 3 4 |
const open = document.getElementById('open'); const close = document.getElementById('close'); const modal = document.getElementById('modal'); const mask = document.getElementById('mask'); |
意外とシンプルなコードですね。まず「open」、「close」、「modal」、「mask」の変数を作り、この中に「document.getElementById」によってidを取得して格納しています。
「id=open」がクリックされた時の動作設定
|
1 2 3 4 |
open.addEventListener('click',()=>{ modal.classList.remove('hidden'); mask.classList.remove('hidden'); }); |
「id=close」がクリックされた時の動作設定
|
1 2 3 4 |
close.addEventListener('click',()=>{ modal.classList.add('hidden'); mask.classList.add('hidden'); }); |
「id=mask」がクリックされた時の動作設定
|
1 2 3 |
mask.addEventListener('click',()=>{ close.click(); }); |
今回はモーダルウィンドウの一例をメモしました。説明分だけでしたが、ウィンドウの中に更に別のボタンを配置したりして、用途にあったもにカスタマイズしていけたらいいですね。その為にはもっともっと、Javascriptや色んな勉強をしなければなりませんね(｀･ω･´)