コピペで実装！脱jQueryでも簡単モーダルウィンドウ［HTML / CSS / Javascript］
posted : 2019.05.04
こんにちは、ma-ya’s CREATE［まーやずくりえいと］です。
以前書いた↓の記事。おかげさまでこのサイトトップクラスでアクセスの多いエントリーとなっていますmm
非jQuery依存のモーダルウィンドウサンプル
脱jQueryが叫ばれて久しいですが、今回は非jQuery依存のモーダルウィンドウサンプルとしてコードを書き換えてみました。
機能的には以前と同様。
最低限のスタイリング＆領域外クリックでモーダルクローズ機能を備えています。
見た目は好きにカスタマイズしてもらえれば宜しいかと。
よくわからない方も安心して下さい。コピペで使えますよ（ﾆｯｺﾘ）。
[注意（iOSデバイスでデモを確認する場合）]
一部のiOSデバイスだと↑のcodepenは動かないようです（codepen環境特有のバグの模様）。
通常のHTML環境であれば動作するので、↑のcodepenが動かない場合は下記デモページよりご確認下さい。
使い方とかコピペのポイント
今回も一応コピペのポイントを書いておきます。
大方前回と同様なので前回記事も参考にして頂ければと。
CodePen「HTML」
HTML部分はほぼ変更なし。
一点、jQueryが必要ないので前回のHTML末尾、jQuery読み込み部分はカットされています。
普通に「モーダルエリアここから」「モーダルエリアここまで」部分をHTMLの適当な場所にコピペしちゃって下さい。
あと前回も言ってますが、モーダルを開くための要素（ボタンとか）には必ず要素にid=”openModal”を付与するのを忘れずに。
※idやクラス名は変更しちゃうと動かないので注意。
CodePen「CSS」
「モーダルCSSここから」「モーダルCSSここまで」までをコピペします。
まあ前回とほぼ一緒ですね。
モーダル内でスクロールを有効にしたい場合は前回記事の「補足2」をご参照あれ。
CodePen「JS」
HTMLのbody閉じタグ直前あたりでscriptタグで囲って直接記述するか、外部ファイルで読み込むかして下さい。
コーディング変更点
ここからはほぼ自分へのメモなので興味ない方はスルーで。
今回、jQueryを使わず、言わばVanilla JS / 生JSで書き換えるにあたって、出来るだけアニメーションの部分はCSSに任せたいと思いました。
しかもjQueryの便利なfadeIn / fadeOutとかのメソッドって、生JSで書くともう自分にとっては絶望的に複雑だったりします。。
その為（脱jQueryと言うには大げさだったかもしれないけど）今回はCSSでモーダル表示用のクラス「is-show」を用意して、それを生JSで切り替える（トグルする）方法をとってます。
結果的にコードはすっきりしたし、アニメーションがCSS制御の為、イージング等もCSSで比較的簡単に調整できるものになったかと。
CSSの変更ポイント
上述した通りモーダル表示用のクラス「is-show」を追加しています。
最大のポイントはtransitionプロパティでアニメーションを制御するために、表示をdisplayプロパティではなくvisibilityプロパティで制御しています。
display:none要素を非表示→表示させる場合、transitionは適用されない
本当にざっくり適当に言うと、display:none状態の要素は“無いもの”とされてしまうため、一緒に指定しているopacity等のトランジション対応要素はアニメーションの初期値として認識されないです。
じゃあ opacity:0 だけで良いんじゃない？と、そうは問屋が卸さないのです。
opacity:0だけだと透明状態のモーダルがopenModalボタンの上に被ってしまいボタンが押せません（絶望）。
CSSで表示非表示をトランジションさせる場合はdisplayプロパティではなくvisibilityプロパティで制御
そういうわけで今回はvisibilityプロパティで対応しました。
// modalAreaクラス visibility: hidden; opacity : 0; // is-showクラス visibility: visible; opacity : 1;
display:noneと違ってvisibility: hiddenは“無いもの”とはなりません。
つまり一緒に指定しているopacity等のトランジション対応要素がアニメーションの初期値として認識されるということ。
事実、レイアウト的にトルツメ＝無いものとされるdisplay:noneに対して、visibility: hiddenはhiddenされた要素の領域は確保＝トルママされます。
また今回の場合、modalArea部分はposition:fixed;で絶対配置されているので、領域が確保されてようとレイアウトを気にする必要はありません。
CSSで表示非表示をトランジションさせる場合の一つの手法として覚えておきたい。
ちなみに他の方法としてanimationプロパティでアニメーションさせる方法もありますが、アニメーションをトグルさせる場合（行きと帰りのアニメーションが必要な場合）はtransitionでアニメーションさせる方が宜しいかと。
イージングやデュレーション指定がCSSから簡単に出来るのも個人的にうれしいです。
JSの変更ポイント
JSはjQueryを使わないので、全面的に書き換えています。
ポイントとしては、
- is-showクラスのつけ外しは .classList.toggle()を使う
- 表示切替をする要素を配列にまとめる
- for文を使って一括でクリックイベントを指定
といったところ。
思ったよりコードがスッキリしたのでホッとしました。
.classList.toggle()とか、生JSでも便利なメソッドが出てきているのですね。
レガシーブラウザは…残念ながらごめんなさいな感じですが。
［補足］モーダル表示時の背景固定処理
補足として、モーダル実装時のメジャーな要件、モーダル表示時は背景固定してスクロールさせない、というものがあります。
これ自分で実装すると意外と問題が多いんですが、それについて記事にまとめてみました。
今回の記事と同様、脱jQueryをテーマとしてサンプルコードを用意したので、jQueryの使えない案件などでも使えるかと。
なかなか手こずりましたが、参考程度に見てもらえればと思います。
というわけで、今回は以前のモーダルウィンドウをjQuery無し・脱jQueryをテーマに書き換えてみました。
どなたかの参考になればこれ幸い。
