CSS3 badge

通常「モーダル・ポップアップ」はjQueryを利用して実装するケースが多いかと思いますが、今回紹介する［Pure CSS Modal Popup］は、その名のとおりスタイルシートの設定だけで実装できる便利なテクニックです。

まずは下記URLよりサンプルをご覧ください。

Pure CSS Modal Popup：実装サンプル

HTMLの記述

実際にサンプルサイトで使っているHTMLコードです。

<div class="modal">
	<input id="modal-trigger" type="checkbox">
	<label for="modal-trigger">Launch Modal</label>
	<div class="modal-overlay">
		<div class="modal-wrap">
			<label for="modal-trigger">✖</label>
			<h4>ポップアップ・ウィンドウ・タイトル</h4>
			<p>コンテンツ</p>
		</div>
	</div>
</div>

ここでのポイントはinput要素に必ず「id属性」を指定しておくこと。
さらにポップアップする要素の外側と内側にlabel要素を作ります。このlabel要素には「for属性」を追加して、先ほどのinput要素に記述した「id属性」と同じ値を記述します。
こうして紐づけられたinput要素とlabel要素が、この［Pure CSS Modal Popup］のキモの部分になってきます。

CSSの記述

以下、スタイルシートの中からモーダル・ポップアップの動作に関わる主要な要素をピックアップしました。

.modal > label {
background: #FFD300;
color: #000;
cursor: pointer;
display: inline-block;
}

.modal-overlay {
background:#000;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-align:center;
}

.modal-wrap {
position: relative;
margin: 0 auto;
width: 100%;
}

.modal-wrap label {
background: #FFD300;
color: #000;
cursor: pointer;
display: inline-block;
}

input {
position: absolute;
z-index: -9999;
visibility: hidden;
}

.modal-overlay {
opacity:0;
	-webkit-transform: scale(0.5);
	-moz-transform: scale(0.5);
	-ms-transform: scale(0.5);
	-o-transform: scale(0.5);
	transform: scale(0.5);
	-webkit-transition: all 0.75s cubic-bezier(0.65, -0.55, 0.265, 1.55);
	-moz-transition: all 0.75s cubic-bezier(0.65, -0.55, 0.265, 1.55);
	-ms-transition: all 0.75s cubic-bezier(0.65, -0.55, 0.265, 1.55);
	-o-transition: all 0.75s cubic-bezier(0.65, -0.55, 0.265, 1.55);
	transition: all 0.75s cubic-bezier(0.65, -0.55, 0.265, 1.55);
z-index: -999;
}

input:checked ~ .modal-overlay {
opacity: 1;
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-0-transform: scale(1);
	transform: scale(1);
z-index: 999;
}

スタイルシート側ではinput:checkedのときに間接セレクタ「~」を使ってinput:checked ~ .modal-overlayと指定して、インプット要素にチェックされたときにオーバーレイが実行される仕組みになっています。これがポップアップ時の背景になるワケです。

HTML側でポップアップする要素の外側と内側にlabel要素を２つ作った理由は、モーダル・ウィンドウを閉じるときに必要になるからです。

input要素と２つのlabel要素が紐づけられているために、それぞれのlabel要素のクリックでinput要素のオン・オフを切り替え、それがモーダル・ウィンドウの表示・非表示に繋がっていると言う仕組みになっています。

仕組みが理解できれば実装は簡単ですね。
難しいjQueryは抜きで、デザインも含めすべての処理がスタイルシートだけで完結しているので、初心者の方でも比較的簡単に扱えると思います。
ぜひご利用ください。

Pure CSS Modal Popup：実装サンプル