Modal(モーダル)
今回はModalを作ってみました。まずは実装を見てみてください。
<div class="modal-wrapper">
<div class="backdrop"></div>
<div class="modal">
<button class="btn-close">x</button>
<h3>Modal header goes here</h3>
<div class="content">
modal content goes here.
</div>
</div>
</div>
<button id="btn-show">Show modal</button>
最後の行の #btn-show の要素が見えているボタンです。それ以外の要素はデフォルトでは非表示となっています。それぞれ役割を書いておきます。
- .modal-wrapper = モーダルの親要素。この要素のクラスをトグル(is-visibleクラスの有無の切り替えを)する事で、要素の表示/非表示を切り替えています。
- .backdrop = 黒背景です。この要素のクリック時にモーダルを閉じる。という動きを作るためにも使われています。
- .btn-close = 要素の右上に表示されている閉じるボタンです。
- h3, .content = モーダルのコンテンツです。今回は文字のみのシンプルな形です。
.modal-wrapper {
/* 要素の配置を固定位置にする */
/* top, right, bottom, left のすべてが0 = 全方向に広がりきった要素 = 全面に伸びた要素となる */
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
/* 要素を非表示とする。という指定 */
display: none;
}
.modal-wrapper .backdrop {
/* 要素の位置を親要素(この場合は "fixedな.modal-wrapper")を基準とした固定位置とする。 */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
/* rgba = 赤・緑・青・アルファ値(透過) の順で色を指定。0.5なので半透明。 */
background-color: rgba(0, 0, 0, 0.5);
}
/* ".is-visible" が ".modal-wrapper" に付いたら */
.modal-wrapper.is-visible {
/* 要素を表示する */
display: block;
}
/* モーダル(ポップアップ)要素のスタイル */
.modal {
/* 要素を親要素の上下中央に位置に揃える。 */
position: absolute;
top: 50%;
left: 50%;
/* 要素をXYZ軸の順で移動させる */
transform: translate3d(-50%, -50%, 0);
/* 背景色を白に */
background-color: white;
/* 角の丸みを付ける(4px) */
border-radius: 4px;
}
.modal {
/* 要素内の空白。上下8px、左右0px(無し) の指定(略記法) */
padding: 8px 0;
}
.modal h3 {
/* 要素の外側の空白。上8px、左右0px(無し)、下0px の指定(略記法) */
margin: 8px 0 0;
/* 要素内の空白。上下左右8p の指定(略記法) */
padding: 8px;
}
.modal .content {
padding: 8px;
}
.modal .btn-close {
position: absolute;
/* 要素内の空白。上下px、左右x(無し) の指定(略記法) */
padding: 2px 8px;
top: 0;
right: 0;
/* 背景色をtransparent(= 透明)に */
background-color: transparent;
/* カー ソルを "ポインター" とする */
cursor: pointer;
}
前回と比べると文量がありますが、それぞれコメントに書いた部分を見てみてください。重要な所だけ紹介します。
- 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);
/* ".modal-wrapper"の要素を取得 */
const $modal = $(".modal-wrapper");
/* ".modal-wrapper" 要素に ".is-visible" クラスを追加する。 */
const show = () => $modal.addClass("is-visible");
/* ".modal-wrapper" 要素から ".is-visible" クラスを削除する。 */
const hide = () => $modal.removeClass("is-visible");
/* "#btn-show" 要素がクリックされたら "show()" を呼ぶ。 */
$("#btn-show").on("click", () => show());
/* ".backdrop" もしくは ".btn-close" 要素がクリックされたら "hide()" を呼ぶ。 */
$(".backdrop, .btn-close").on("click", () => hide());
今回は jQuery を使いつつ実装してみまし た。jQueryはブラウザのDOM関連のAPIが標準化される前の時代に、作られたものですが、今でも多くのWebサイト(コーポレートページ・LP等)で利用されています。まだまだ使い道があるので、覚えておいてください。
やっている事は以下の３つのみです。
$("セレクタ")= まずHTML内のタグ要素への参照を取得しています。jQueryでは$("セレクタ名")とすることで、要素にアクセスする事が出来ます。$.addClass() / $.removeClass()= クラスの付け替え$.on("click", () => {})= クリックイベント(要素のクリック)が発生したら、第二引数に渡された関数を呼び出す。- ここでは表示ボタンが押されたら
show()、閉じるボタン(もしくは黒背景)が押されたらhide()を呼び出す事で、CSSを使った要素の表示/非表示を行っています。
重要なのはJSからはクラス名の操作のみを行い、実際のモーダルの表示(表示/非表示)の切り替えはCSSで行っている点となります。こうする事で、JS/CSSでそれぞれやることの分担がハッキリします。
今回のモーダルは表示・非表示の切り替えのみでシンプルですが、実際に良く使われているBootstrapでのModal(モーダル)の実装はこのようになっています。
BootstrapのModal(モーダル)のサンプル
今回作ったものと比べると、背景・ポップアップ部分のトランジション(上からスライドインして、閉じると上にスライドアウトする)の有無が違い として挙げられます。この動きをどうやって再現するか、についてはまた後ほどVue.jsのサンプルでご紹介しようと思います。
このように自分が作ったものと良く使われているものを比較して、「どうやったらこの動きが作れるんだろう」と興味を持つ。あるいは何が足りないかの差に気づける事が、知識を深める上で大事なポイントです。
最後に複雑なコンポーネントである Tab(タブ)要素 の事例を見ていきます。
最終更新 2yr ago