モーダルウィンドウをjQueryを使わず、JavaScriptのみで実装
覚えたものを備忘録を兼ねてまとめました。
今回実装するのは簡単に説明すると、『詳細をみる』ボタンをクリックすると、デフォルトでつけているhiddenクラスが外されてモーダルとマスクが出現し、『閉じる』ボタンまたは、周りのマスクをクリックすれば、hiddenクラスがついてモーダルが閉じる仕様となっています。
早速雛形のファイルを作っていきます。
ソース
HTML
<!DOCTYPE html><htmllang="ja"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><metahttp-equiv="X-UA-Compatible"content="ie=edge"><title>モーダル</title><linkrel="stylesheet"href="style.css"></head><body><divid="open">詳細をみる
</div><divid="mask"></div><sectionid="modal"><p>これは簡単なモーダルウィンドウです。</p><divid="close">閉じる
</div></section><script src="script.js"></script></body></html>JavaScriptでhtml要素を取得するため、idをふっています。
openはモーダル表示、maskはモーダル周りの黒っぽい背景、modalはモーダル、closeは閉じるボタンです。
CSS
body{font-size:16px;}#open,#close{cursor:pointer;width:200px;border:1pxsolid#ccc;border-radius:4px;text-align:center;padding:12px;margin:16pxauto0;background:#4caf50;color:white;}これで一度展開してみましょう。
このようになればひとまず大丈夫です。
次にmaskとmodalのcss作っていきます。
マスクとモーダルのCSS
#mask{background:rgba(0,0,0,0.4);position:fixed;top:0;bottom:0;right:0;left:0;z-index:1;}#modal{background:#fff;color:#555;width:300px;padding:40px;border-radius:4px;position:absolute;top:40px;left:0;right:0;margin:0auto;z-index:2;}#modalp{margin:0020px;}maskはposition: fixed;とrgbaで画面全体を黒っぽくしています。
modalと#maskにz-indexを設定していますが、#maskは#modalより下に来ないと、#modalまで覆いかぶさって黒くなってしまうので、#modal＞#maskに設定しています。
この時点で下の画面のようになるはずです。
マスクとモーダルは標準時には隠しておきたいので、cssを用いて見えない状態にしておきます。
display: none;とtransform: translateで隠しておく。
<divid="mask"class="hidden"></div><sectionid="modal"class="hidden">#mask.hidden{display:none;}#modal.hidden{transform:translate(0,-500px);}htmlで”#maskと#modalにhiddenクラスを命名し、cssで隠します。
maskはdisplay: none;で普通に非表示にしていますが、今回モーダルは上から表示させたいので、
modalはtransform: translate(0,500px);で、500px上に隠しておきます。
消えていたら、JavaScriptに入ります。
JavaScriptでマスクとモーダルを操作する
今回は、『openをクリックすると、#modalと#maskのhiddenクラスが取り除かれて表示する』という設計なので、openにクリックイベントをつけていきます。
'use strict';{constopen=document.getElementById('open');constclose=document.getElementById('close');constmodal=document.getElementById('modal');constmask=document.getElementById('mask');open.addEventListener('click',function(){modal.classList.remove('hidden');mask.classList.remove('hidden');});}これで、”詳細をみる”をクリックすることで、モーダルとマスクのhiddenクラスが外されて、表示されるのが確認できるはずです。
しかし、再び非表示にすることはできないので、今度はhiddenクラスを再クリックで付与できるようにします。
また、マスク部分を押しても非表示にできた方がユーザビリティ的にも自然なので、maskにもクリックイベントを適用します。
'use strict';{constopen=document.getElementById('open');constclose=document.getElementById('close');constmodal=document.getElementById('modal');constmask=document.getElementById('mask');open.addEventListener('click',function(){modal.classList.remove('hidden');mask.classList.remove('hidden');});close.addEventListener('click',function(){modal.classList.add('hidden');mask.classList.add('hidden');});mask.addEventListener('click',function(){modal.classList.add('hidden');mask.classList.add('hidden');});}最後にアニメーションを
モーダルを上からにゅっと表示させるため、transitionを追加してやります。すぐに出来ます。
#modal{background:#fff;color:#555;width:300px;padding:40px;border-radius:4px;position:absolute;top:40px;left:0;right:0;margin:0auto;z-index:2;transition:0.4s;}modalにtransitionを追加するだけです。
これで完成です。
ご閲覧ありがとうございます。