始めに
EC やイベント用 LP で期間限定のキャンペーンなど告知したいときにアピールしやすいモーダルですが、実装には色々方法があるのでご紹介、というか自分としても整理してみたいなと思い書いてみます。
HTML・CSS・JS 初心者の方やクライアントからの要望で使わないといけなくなったけど最近使ってなくてどんな感じにやればよかったっけ？という方へ参考になれば幸いです。
実装方法一覧
今回実装方法として上げるのは以下になります。
- 素の JavaScript（Vanilla-JS）
- jQuery
- Input ＋ Label
- Dialog
素の JavaScript（Vanilla-JS）
一番スタンダードなやり方かなと思います。
See the Pen Modal (Vanilla-JS) by mimihokuro (@mimi_hokuro) on CodePen.
OPENボタンを押すことで、非表示になっているダイアログにopacity: 1とvisibility: visibileを設定したクラスを付与して上書きしています。
Vanilla-JS のメリット・デメリット
メリットとしては実装が簡単なところが一番です。難しい CSS スタイルの指定も JavaScript のコードも必要ありません。
デメリットとしては、特定の SaaS では JavaScript を禁止しているものもあって、その場合上記の方法が使えません。また、positionやtransformによる位置指定やtransitionでアニメーションを表現する際のopacityやvisibilityといったプロパティによってコードが多くなりがちなので、記述量が増えてしまうといったところがデメリットでしょうか。
jQuery
See the Pen Modal (jQuery) by mimihokuro (@mimi_hokuro) on CodePen.
jQuery のメリット・デメリット
メリット・デメリットとしては Vanilla-JS と変わりはありません。さらなるメリットとしてfadeInやfadeOutといったメソッドが jQuery には用意されているので、CSS による記述が必要なく Vanilla-JS よりもコードがスッキリ、かつ分かりやすくなります。デメリットとしては、jQuery を使うには外部 JS を読み込む必要があり、それがないと動かないという点と外部 JS 自体のサイズが大きく、不要なコードまで読み込んでしまうため、ページの読み込み速度に影響が出てしまいます。
さらに、モダンなフレームワークが使われるようになり、最近のフロントエンド開発に採用されなくなっているという観点から脱 jQuery の動きが加速しているようです。とはいっても、未だに jQuery を利用している企業も多いようで、今絶対いらないかというとそういう訳ではないので、必要になったタイミングで学習するのがよさそうです。
Input ＋ Lable
See the Pen Modal(Input+label) by mimihokuro (@mimi_hokuro) on CodePen.
Input ＋ Label のメリット・デメリット
メリットとしては JavaScript を使用しないので読み込むファイルが減ってページ読み込み速度が上がるという点です。また、JavaScript が使えない環境でも使えるため特殊環境に対応できるという点がメリットとして上げられます。
デメリットとしてはちょっとテクニカルなので CSS コードが分かりづらいという点が挙げられます。
Dialog
See the Pen Modal (Dialog) by mimihokuro (@mimi_hokuro) on CodePen.
Dialog のメリット・デメリット
Vanilla-JS とメリットは似てくるのですが、ダイアログに対するpositionなどやダイアログが表示している際の背景に対するスタイルの配慮が必要ないというのがメリットです。書き方には少し癖もありますが、記述量も少なく済むので慣れればかなり便利なdialogタグです。
デメリットとしては Vanilla-JS と同じく JavaScript が使えない環境では使用できないという点くらいでしょうか。
最近の Web 制作においてオススメな書き方だと思っています。
最後に
モーダルウインドウの実装方法についてご紹介しましたが、環境や好みに合わせて参考に実装してみてください。
また、もっといい書き方があればぜひ教えてください。