CSS（CSS3）のみでLightbox風モーダルウィンドウを作成する方法

2011/02/01 TAGS :CSS, ModalWindow

jQueryなどのJavaScriptライブラリでは定番のLightBoxやThickBoxといった、ポップアップ型モーダルウィンドウプラグインが様々あります。

ギャラリー要素などコンテンツの見せ方としてモーダルウィンドウは定着しつつありますが、そんなモーダルウィンドウをJavaScriptなどのSCRIPTを使用せずに、CSS（CSS3）のみで実装するサンプルを実験的に作ってみたので紹介してみます。

まずは動作サンプルから。
※動作環境は基本的にはWebkitブラウザのSafariやChromeのみですが、今回はWebkit以外のブラウザFirefoxなどでもアニメーション以外の動作は実行されます。

CSS3 MODAL WINDOW【SAMPLE01】

≫サンプル【01】画面はこちらから。（別枠で開きます。）

リンクをクリック後に表示される、
————————————————–
≫モーダルウィンドウ【01】OPEN
≫モーダルウィンドウ【02】OPEN
————————————————–
をそれぞれクリックしてみてください。

サンプルページに配置しているリンクをクリックすることで、CSS3モーダルウィンドウが表示されます。

ウィンドウ内にはテキストや画像やリンクの他、開いたウィンドウを閉じるボタンの設定も可能です。

内部構成について。
まずはHTMLソース。

◆HTML
<div id="contents">

<p>≫<a href="#open01">モーダルウィンドウ【01】OPEN</a></p>
<p>≫<a href="#open02">モーダルウィンドウ【02】OPEN</a></p>

<div id="modal">

<div id="open01">
<a href="#" class="close_overlay">×</a>
<div class="modal_window">
<h2>MODAL WINDOW【01】</h2>
<p>JavaScriptを使用しないCSS（CSS3）のみでのLightBox風モーダルウィンドウです。</p>
<p>モーダルウィンドウ内は通常のテキストや画像の配置の他、<br />
リンクテキストなどの配置ももちろん可能です。<br />
≫<a href="https://black-flag.net">BlackFlagトップページへ（同枠）</a><br />
≫<a href="https://black-flag.net" target="_blank" rel="noopener">BlackFlagトップページへ（別枠）</a></p>
<p>モーダルウィンドウを閉じる際は、ウィンドウ外をクリックするか、<br />
下記の様に配置して閉じるボタンをクリック。</p>
<a href="#">【×】CLOSE</a>
</div><!--/.modal_window-->
</div><!--/#open01-->

<div id="open02">
<a href="#" class="close_overlay">×</a>
<div class="modal_window">
<h2>MODAL WINDOW【02】</h2>
<img src="img/photo01.jpg" width="300" height="225" alt=""><br />
<a href="#">【×】CLOSE</a>
</div><!--/.modal_window-->
</div><!--/#open02-->

</div><!--/#modal-->

</div><!--/#contents-->

モーダルウィンドウとして表示する要素全体を＜div id=”modal”＞～＜/div＞で囲い、それぞれ個々のウィンドウについては
＜div id=”open01″＞～＜/div＞
＜div id=”open02″＞～＜/div＞
といった命名規則（ここは任意）で構成しています。

個々のウィンドウ指定用の＜div＞の中は通常のHTMLページとして、ソース要素を追加することが可能です。

続いてはCSS。
以下の様になっています。

◆CSS
/* ContentsArea
-------------------------- */
#contents {
	margin: 0 auto;
	padding: 10px 0 50px 0;
	width: 100%;
}

p {
	padding: 10px 0;
}

#open01,
#open02 {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
	position: absolute;
}

.close_overlay {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
	text-indent: -9999px;
	position: absolute;
	background: #000;
	opacity: 0.5;
	z-index: 5;
}

.modal_window {
	top: 50%;
	left: 50%;
	margin: -150px 0 0 -200px;
	width: 400px;
	height: 300px;
	text-align: center;
	display: block;
	background: #fff;
	position: absolute;
	z-index: 10;
}

.modal_window h2 {
	margin-bottom: 20px;
	width: 400px;
	height: 30px;
	line-height: 30px;
	color: #fff;
	font-size: 12px;
	font-weight: bold;
	text-align: left;
	text-indent: 15px;
	background: #000;
}

.modal_window p {
	padding: 0 15px 15px 15px;
	font-size: 12px;
	line-height: 160%;
	text-align: left;
}


/* CSS3 ModalWindow SET
-------------------------- */
@-webkit-keyframes modalFadeIn {
	0% {opacity:0;display:block;}
	100% {opacity:1;}
}

div#modal div:target {
	-webkit-animation-name: modalFadeIn; 
  	-webkit-animation-duration: 1s;
  	-webkit-animation-iteration-count: 1;
	opacity: 1;
	display:block;
}

あらかじめモーダルウィンドウの要素は「display:none」で非表示にしておき、CSS3プロパティの「:target」を使って、ターゲットとなった＜div＞要素に対してフェードインするアニメーションを付けています。

基本的な部分はCSS2の指定が占めており、表示／非表示の切り替えをCSS3を使っている感じになります。

一つ目のサンプルはモーダルウィンドウが表示される際のアニメーションパターンを「フェードイン」にしましたが、ここは別のアニメーションを付けることも可能になっています。

表示アニメーションのパターンを変えてみたサンプルは以下から。

CSS3 MODAL WINDOW【SAMPLE02】

≫サンプル【02】画面はこちらから。（別枠で開きます。）

モーダルウィンドウが出現する際、フェードインではなくウィンドウが拡大表示してくるアニメーションになります。

HTMLについては一つ目のサンプルと同じで、CSSのみ構成が変わります。

◆CSS
/* ContentsArea
-------------------------- */
#contents {
	margin: 0 auto;
	padding: 10px 0 50px 0;
	width: 100%;
}

p {
	padding: 10px 0;
}

#open01,
#open02 {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: none;
	position: absolute;
}

.close_overlay {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
	text-indent: -9999px;
	position: absolute;
	background: #000;
	opacity: 0.5;
	z-index: 5;
}

.modal_window {
	top: 50%;
	left: 50%;
	margin: -150px 0 0 -200px;
	width: 400px;
	height: 300px;
	text-align: center;
	display: block;
	background: #fff;
	position: absolute;
	z-index: 10;
	-webkit-transform: scale(0);
}

.modal_window h2 {
	margin-bottom: 20px;
	width: 400px;
	height: 30px;
	line-height: 30px;
	color: #fff;
	font-size: 12px;
	font-weight: bold;
	text-align: left;
	text-indent: 15px;
	background: #000;
}

.modal_window p {
	padding: 0 15px 15px 15px;
	font-size: 12px;
	line-height: 160%;
	text-align: left;
}


/* CSS3 ModalWindow SET
-------------------------- */
@-webkit-keyframes modalFadeIn {
	0% {opacity: 0;display: block;}
	100% {opacity: 1;}
}

div#modal div:target {
	-webkit-animation-name: modalFadeIn;
  	-webkit-animation-duration: 1s;
  	-webkit-animation-iteration-count: 1;
	opacity: 1;
	display: block;
}

@-webkit-keyframes modalScale {
	0% {opacity: 0;display: block; -webkit-transform:scale(0);}
	100% {opacity: 1; -webkit-transform:scale(1);}
}

div#modal div:target .modal_window {
	-webkit-animation-name: modalScale;
  	-webkit-animation-duration: 1s;
  	-webkit-animation-iteration-count: 1;
	-webkit-transform:scale(1);
	opacity: 1;
	display: block;
}

こっちはクラス「.modal_window」に対して、CSS3プロパティの「-webkit-transform: scale(0);」を使って要素のスケールの大きさを制御することによってアニメーションを付けています。

この様なアニメーションの設定を変化させることでCSSのみでも様々なパターンのアニメーションを付けることが可能になります。

CSS（CSS3）でのモーダルウィンドウ実装方法についてはこんな感じです。

今まで紹介してきたJavaScriptを使用せずにCSSのみで実装するUIのサンプルとあまり使用しているプロパティは実はあまり変わっていないです。

「:target」と「transform」を組み合わせることで、まだまだCSSのみで様々なUIを実装することができるようになりそうで今後も期待できそうです。

CSSのみでモーダルウィンドウUIが必要になった際の参考にしてもらえれば幸いです。。。

サンプルファイルをダウンロードしたい方はこちらから