Modal(モーダル)
最終更新
最終更新
今回はModalを作ってみました。まずは実装を見てみてください。
Show modal ボタンを押すと、前面にモーダル(ポップアップ)要素が表示されます。黒背景もしくはxボタンをクリックすると閉じます。それぞれサンプルコードを見ていきます。
最後の行の #btn-show の要素が見えているボタンです。それ以外の要素はデフォルトでは非表示となっています。それぞれ役割を書いておきます。
.modal-wrapper = モーダルの親要素。この要素のクラスをトグル(is-visibleクラスの有無の切り替えを)する事で、要素の表示/非表示を切り替えています。
.backdrop = 黒背景です。この要素のクリック時にモーダルを閉じる。という動きを作るためにも使われています。
.btn-close = 要素の右上に表示されている閉じるボタンです。
h3, .content = モーダルのコンテンツです。今回は文字のみのシンプルな形です。
前回と比べると文量がありますが、それぞれコメントに書いた部分を見てみてください。重要な所だけ紹介します。
margin / padding = 何箇所か使っていますが、これは余白の空き具合の調整です。どちらも似た動きをしますが、marginは要素の外側、paddingは要素の内側の余白。を変化させます。値の指定には略記法がいくつかあり、 "8px(上下左右)" = "8px(上下) 8px(左右)" = "8px(上) 8px(右) 8px(下) 8px(左)" とどれも同じ意味となります。時計回りの順で指定する。と覚えておけば良いです。
position: absolute = positionを指定する事で、要素の配置方法を変更することが出来ます。以下のような種類がありますが、ほぼ未指定(= static)のまま利用することになります。
static(デフォルト = 未指定)
relative(要素同士の相対位置)
absolute(親からの相対位置で固定)
fixed(画面からの相対位置で固定)
transform = 要素の見た目を変形させるプロパティです。translate3d(-50%, -50%, 0) と指定すると、X軸に -50%、Y軸に-50%, Z軸に0%(= 変化なし) ずらす。という意味になります。-50%の位置は自身のサイズが起点となるので、-50% = 自身の半分の高さ(or 幅)という意味となります。 以下のようにセットで使えば上下左右の中央の位置に要素が来る。と覚えておいて(丸暗記して)ください。position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0);
今回は jQuery を使いつつ実装してみました。jQueryはブラウザのDOM関連のAPIが標準化される前の時代に、作られたものですが、今でも多くのWebサイト(コーポレートページ・LP等)で利用されています。まだまだ使い道があるので、覚えておいてください。
やっている事は以下の3つのみです。
$("セレクタ")
= まずHTML内のタグ要素への参照を取得しています。jQueryでは $("セレクタ名")
とすることで、要素にアクセスする事が出来ます。
$.addClass() / $.removeClass()
= クラスの付け替え
$.on("click", () => {})
= クリックイベント(要素のクリック)が発生したら、第二引数に渡された関数を呼び出す。
ここでは表示ボタンが押されたら show()
、閉じるボタン(もしくは黒背景)が押されたら hide()
を呼び出す事で、CSSを使った要素の表示/非表示を行っています。
重要なのはJSからはクラス名の操作のみを行い、実際のモーダルの表示(表示/非表示)の切り替えはCSSで行っている点となります。こうする事で、JS/CSSでそれぞれやることの分担がハッキリします。
今回のモーダルは表示・非表示の切り替えのみでシンプルですが、実際に良く使われているBootstrapでのModal(モーダル)の実装はこのようになっています。
今回作ったものと比べると、背景・ポップアップ部分のトランジション(上からスライドインして、閉じると上にスライドアウトする)の有無が違いとして挙げられます。この動きをどうやって再現するか、についてはまた後ほどVue.jsのサンプルでご紹介しようと思います。
このように自分が作ったものと良く使われているものを比較して、「どうやったらこの動きが作れるんだろう」と興味を持つ。あるいは何が足りないかの差に気づける事が、知識を深める上で大事なポイントです。
最後に複雑なコンポーネントである Tab(タブ)要素 の事例を見ていきます。