【Javascript】Javascriptでモーダルウィンドウを作ろう

Pocket

今回はJavascriptによるモーダルウィンドウ作成の一例をメモします。他にも色々と作り方はあると思いますが、私の様なまだまだ駆け出しの初心者に自作は難しいので、一つの作成例からしっかり要所を抑えておきたいですね(`・ω・´)

モーダルウィンドウってなに?

私も最近まで「モーダルウィンドウ」という言葉を知りませんでしたが、これはネットサーフィンをしてるとどこかで見たことある機能だと思います。
モーダルウィンドウはボタンを押すと、今まで開いていたウィンドウ画面とは別のウィンドウが開く機能です。
厳密にいえば、「ウィンドウ内で指定された操作を完了、またはキャンセルするまで他のウィンドウを開くことができないウィンドウ」という機能です。

モーダルウィンドウの役割

①警告メッセージ

ファイルの消去などユーザーが間違った操作をした時にダメージが大きい操作に対して、警告メッセージを表示する形で利用されます。別のウィンドウを確認画面にしておくとユーザーの誤った操作を防止できそうですね。

②エラーメッセージ

他のウェブサイトで使用中のファイルを消去しようとする際など、ウェブサイトやアプリケーションで行えない操作をする時にエラーメッセージを表示するなどのケースで利用されます。

③ロード中

ユーザがサイト内のボタンをクリックした結果、指定した操作の処理が行われている事に気づかず、もう一度同じボタンをクリックしてしまうことがあります。その際に同じボタンを押すことを防ぐためにロード中というメッセージが利用されます。

モーダルウィンドウの使用には多種多様な用途を持たすことができますが、今回はそこまで複雑な機能をもったものは作成せず、「ボタンを押したらメッセージが表示され、”閉じる”のボタンを押したらウィンドウが閉じる」というシンプルなものを作成してみます。

モーダルウィンドウ作成の一例

See the Pen
mdVRbOx
by egg (@egg0522sei)
on CodePen.

「詳細をみる」のボタンを押すと別のウィンドウが開き、「閉じる」のボタンを押すと元のウィンドウに戻るプログラムができました。HTML、CSS、Javascriptの要所をかいつまんで解説していきます。

HTML

HTMLのコードです。HTMLでは大きく3つのパーツに分かれており、分解してみていきましょう。

詳細ボタン

モーダルウィンドウを起動するためのボタンです。「open」のidがついています。

マスク

モーダルウィンドウが起動した際に、画面を半透明にするカバー部分です。「mask」のidを付けています。また、このマスクはモーダルウィンドウが起動するまで表示されてはいけないので、classの「hidden」を付け、CSSで「display:none;」で非表示にしておきます。

モーダル

モーダルウィンドウです。表示する文章と、ウィンドウを閉じる為のボタンを用意します。これらすべてを「section」タグで囲み、「modal」のidを付けます。またマスク同様、「hidden」のclassをつけておきます。

HTML大きく分けて、この3つのパーツから成り立っています。続いてCSSを見ていきます。

CSS

「詳細をみる」、「閉じる」のボタンデザイン部分です。ここは好みにカスタマイズしていいと思います。

 

画面全体を覆う、マスク部分です。「position:fixed;」によって、画面上に固定、「background:rgba;」によって半透明にしています。また「z-index:1;」はモーダルウィンドウより背面にする為に設定しています。モーダルウィンドウにも「z-index」を設定しますが、モーダルの数値よりも小さい値を設定しておくことが重要です。

 

モーダルウィンドウのCSS部分です。ここで重要なのは絶対配置にする「position:absolute;」とマスクより前面に配置する「z-index:(maskより大きい値);」です。「top」などの値は表示位置を表し、これは好みの場所に配置できます。
ただひとつ注意すべき点があり、「margin:0 auto;」の部分ですが、これは画面中央に配置する為に記述しています。

 

このCSSは「idの”mask”と”modal”にclass=”hidden”がついている時のみに適用するデザイン」という意味になります。
「mask」には、「display:none;」により非表示になり、「modal」には「transform」によってy軸に-500px、つまり画面上見えないところに配置して隠しています。

Javascript

それでは最後にJavascriptによって動きを追加していきます。

それぞれの変数作成

意外とシンプルなコードですね。まず「open」、「close」、「modal」、「mask」の変数を作り、この中に「document.getElementById」によってidを取得して格納しています。

「id=open」がクリックされた時の動作設定

「open.addEventListener(‘click’,()=&gt」によって、「”id=open”がクリックされた時~」という動作を設定しています。そして「remove(‘hidden’)」によって、「modal」と「mask」の「class=”hidden”」がなくなることによって、半透明のマスクが画面を覆い、モーダルウィンドウが画面上から移動してきます。

「id=close」がクリックされた時の動作設定

“open”とは逆の動作をしています。「add(‘hidden’);」によって、「id=”close”」がクリックされたとき、「modal」と「mask」に「class=”hidden”」が設定されます。この動作により、それぞれが再び非表示になります。

「id=mask」がクリックされた時の動作設定

モーダルウィンドウが表示されている時、半透明の黒いカバーをクリックすることによっても、モーダルウィンドウを閉じる為の設定になります。略して書かれていますが、「close.click();」は「変数closeと同じ動作をしなさい」という意味です。

 

今回はモーダルウィンドウの一例をメモしました。説明分だけでしたが、ウィンドウの中に更に別のボタンを配置したりして、用途にあったもにカスタマイズしていけたらいいですね。その為にはもっともっと、Javascriptや色んな勉強をしなければなりませんね(`・ω・´)

エッグ

シェアする

コメントを残す

メールアドレスが公開されることはありません。

コメントする