67.モーダルを作る ～クリックで最前面に表示させる～
モーダルを作る。
これは以前の課題でも出てきたような・・・。
過去、28～29回目くらいの記事でクリックされた画像を拡大表示するやつを作っていましたね。
今回はリンクをクリックしたら最前面に表示される画面です。
とは言え、一度作ったものの応用なのでそんなにかからず出来るハズ…。
まずは流れを確認
今回は
これで作っていきましょう。
まずはHTMLを作成
これは特に難しいことは無くて、
クリックする要素、表示するモーダルウィンドウをaタグやdivタグでクラスを適宜あててあげるだけです。
以下参考です。
<a class="js-open" href="#">モーダル表示するよ</a>
<div class="modal">
<p>このpタグはモーダルのコンテンツですよ</p>
<a class="js-close" href="#">モーダルを閉じるよ</a>
</div>
こんな感じで準備します。一応クラス名は後でわかりやすいようにしておきましょう。
CSSで該当クラスに対して適用
CSSでは非表示、位置調整、重なりのz-indexを指定していきます。
その他は割愛です。
.modal{
position : absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
z-index : 500;
display:none;
}
positionはページの中央に配置したいので、ページに対して絶対配置します。
最前面に表示したいので、z-indexは全ての要素よりも大きい値に設定。
jQueryで表示させる為にdisplayの値はnoneをにしておきます。
jQueryでクリックを検出してモーダルを表示する
では、早速コードから
$('.js-open').click(function(e) {
e.preventDefault();
$('.modal').fadeIn();
});
$('.js-close').click(function(e) {
e.preventDefault();
$('.modal').fadeOut();
});
では１行ずつ見ていきましょう
$('.js-open').click(function(e) {
ここはjs-openクラスがクリックされたら処理を実行する。です。ですが、今回は引数に「e」が渡されています。
このeはイベントだそうで、ここでいうイベントは「該当クラスの要素のクリック」ですね。
そして次の行
e.preventDefault();
eは先程の引数なので、イベントなのでとりあえず保留にして、
preventDefault()関数は、直訳すれば「デフォルトの防止」、つまりデフォルト動作の無効化です。DeepL先生感謝。
何のデフォルト動作を無効化するのかといえば、先程のイベント「該当クラスの要素のクリック」です。
クリックされた要素は何でしょうか？
先程のjs-openクラスが設定されている「aタグ」ですね。
aタグがクリックされた時の動作は、「リンクへ飛ぶ」ですよね。
preventDefault()関数で、これを無効化しているわけです。
長くなりました。一旦まとめると
jQueryでは通常のHTMLタグの動作で想定外の動きにならないように、デフォルトを無効にする場合がある。その際には、e.preventDefault();を使う。
今回はaタグのリンクへ飛ぶを無効化し、クリックした時にモーダルのみが開くようにしている。
話を戻します。
$('.modal').fadeIn();
これは該当する要素をfadeアニメーションで表示させる関数ですね。
modalは最初display:noneなので、非表示状態から表示されるわけです。
次のブロックでは、閉じる動作をしていますが
基本的に動作、考え方は同じで、
.js-closeクラスの要素がクリックされたら、modalをfadeアニメーションで非表示にしています。
こんな感じで、意外とカンタンに作れそうですね。
「デフォルト動作の防止」は今後も使う機会がありそうですね。
忘れているとハマりそうな気もします。
今日のまとめ
- モーダルは意外とカンタンに作れるが、z-indexには特に注意すべき
- デフォルトの無効はjsとHTMLでの動作の不一致の解消に一役かっている。
明日からは出張なので、課題もやりつつ記事を書けるよう先取りでPHPも学んでいくかもしれません。
では、また。
