モーダルとは、コンピューター用語で「〔ダイアログ・ボックスが〕モーダルな◆ユーザーが応答しない限り、そのプログラムの他のコントロールは入力を受け付けない。別のプログラムには切替可能」という意味らしいです。
良く見かけるもので言うと、ニュースレターの購読を促すポップアップだったり、ログインウィンドウだったり。広告に使われる事が多く嫌われがちな存在ですね。笑 ですが色々な所で使えるので作れるようになりましょう！
モーダルを作る jQuery
コードとしては簡潔です。今まで出てきたメソッドで作れますね。今回のコードではtarget＝for-modalとなります。
// モダール（開く）
jQuery('.js-modal-open').click(function(e) {
e.preventDefault();
let target = jQuery(this).data("target");
jQuery('.' + target).addClass('is-show');
return false;
});
// モダール（閉じる）
jQuery('.js-modal-close').click(function(e) {
e.preventDefault();
let target = jQuery(this).data("target");
jQuery('.' + target).removeClass('is-show');
return false;
});モーダルを作る HTML
コンタクトフォームの中に書いていきます。送信するボタンの下ですね。
まずはオーバレイの背景を敷いておきます。
その下にモーダル本体ですね。この中に並列で
- 閉じるアイコン
- タイトル
- コンテンツ
- 閉じるボタン
と入れます。コンテンツの中には4つ項目を入れます。ドロワー、タブの時と同様、data-target属性を使うのがポイントです。
モーダルを作る CSS
.contact__modal
まずはウィンドウ全体ですね。positionは固定し、leftとtop、transformで画面中央に持ってきます。widthとheightはパーセンテージで指定します。広がりすぎないようmax-withも指定します。パディングは広めにとります。ここでmap-getの出番です。背景は白に。クリックされていない状態ではdisplay: none;で隠しておきます。
タブレットでは画面9割ぐらいの面積にしておきます。パディングも小さめに。
さらにSPでは左右をもう少し詰めます。
最後にis-showでdisplay: block;にし、クリックした時表示されるようにします。
.contact__modal-close-icon
右上につける×ボタンですね。まずtext-alignで要素を中央寄せに、positionは絶対配置にします。rightとtopをマイナスの数値にする事で、枠から半分はみ出たような見た目にします。ホバー時は指マークに。
imgタグはカンプから読み取った幅を入れておきます。
.contact__modal-title
見出しの部分ですね。これは見出しのコーディングノックの11番目と大体同じですね。.section__titleをサイズダウンした感じです。
.contact__modal-content
モーダルのコンテンツ表示エリアですね。overflow: auto;にする事で、テキスト量が多い場合スクロールバーが出るようにします。上マージンを広めに。calc関数で高さ100％から、テキストエリアの上下の高さを引きます。
最初の文章のブロックだけ上マージンを詰めます。
タブレットでは上マージンをPCより広く空けます。同じようにテキストエリアの上下の高さを引いておきます。
SP版では上マージンは、PC版より若干広めですね。同じようにテキストエリアの上下の高さを引いておきます。
.contact__modal-head
テキストエリアの中の小見出しですね。見出しのコーディングノック5番目の方法でもいいし、擬似要素beforeを使ってもいいですね。回答例では擬似要素が使われています。
.contact__modal-text
テキスト本文ですね。右パディングのみ適度に空けます。上マージンのみ少しだけ空けます。文字色は見出しと同じですね。line-heightを割り算で入れておきます。
.contact__modal-close-button
ボタンのレイアウト情報ですね。_button.scssなど、ボタン専用のSCSSファイルに書いてもいいかもしれないです。要素を中央寄せにし、上マージンをとってテキストエリアとの隙間を空けます。
.contact__modal-background
背景のグレーの部分ですね。こちらは画面全てを覆い尽くすため、width,heightともに100％にします。positionはfixedで固定。背景は黒でopacityで透過させます。ここはbackgroundプロパティのrgbaを使ってもいいですね。(動画では後者です。)
topとleftを0にして、左上にきっちり詰めます。ここでまたmap-getの出番です。今度はmodalからマイナス1にすることで、モーダルより後ろの来るようにします。モーダルが開かれていない時はdisplay: none;に。
最後is-showをdisplay: block;にし、モーダルが開かれたら可視化されるようにします。
.button-modal
ボタンの部分ですね。__button.scssなど、別ファイルに書いてもいいですね。右矢印ボタンとほとんど同じなので、Sassの@extendで継承し、違う部分のみ書き換えるのもいいと思います。
以上です。いよいよ次は中級総復習編です。カンプがとてもかわいいので楽しみです！
コメント