デイトラWeb制作コース中級編 DAY29 モーダルを作る

モーダルとは、コンピューター用語で「〔ダイアログ・ボックスが〕モーダルな◆ユーザーが応答しない限り、そのプログラムの他のコントロールは入力を受け付けない。別のプログラムには切替可能」という意味らしいです。

良く見かけるもので言うと、ニュースレターの購読を促すポップアップだったり、ログインウィンドウだったり。広告に使われる事が多く嫌われがちな存在ですね。笑 ですが色々な所で使えるので作れるようになりましょう!

目次

モーダルを作る 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で継承し、違う部分のみ書き換えるのもいいと思います。

以上です。いよいよ次は中級総復習編です。カンプがとてもかわいいので楽しみです!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメントする

CAPTCHA


目次