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が必要になった際の参考にしてもらえれば幸いです。。。

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

SHARE

Comments (16)

  • スマホ対応サイトを製作するにあたって助けられたサイト | aok123.blog | 2013.02.28 14:27

    […] CSS(CSS3)のみでLightbox風モーダルウィンドウを作成する方法 […]

  • 使いやすくなった!UI素材とテクニック集/CSS jQuery版 | コムテブログ | 2013.12.09 8:35

    […] CSS(CSS3)のみでLightbox風モーダルウィンドウを作成する方法 | BlackFlag […]

  • 立石昌嗣 | 2013.12.21 14:43

    はじめまして。現在ホームページを作っていて、こういうものを導入したいと思っていたので、参考にさせていただきます!

  • BlackFlag | 2013.12.22 12:30

    >立石さん
    コメントありがとうございます。

    このモーダルCSSがサイト制作にお役立ていただけると
    とても嬉しく思います。

    よろしくお願いします。

  • 本間誠二 | 2014.04.16 4:40

    はじめまして、ホームページ作成の初心者の者です。うまく説明が通じるか
    不安ですがよろしくお願いいたします。

    CSS(CSS3)のみでLightbox風モーダルウィンドウを作成する方法ですが、
    大変素晴らしいと思いました。実際に使おうと思い、導入してみましたところ、
    動作はOK!だったのですが、製作上、どうしてもページの下の方で(下にスクロールした場所で)、
    モーダルウィンドウが必要だったので、そこに作りましたが、スモール画像をクリックすると、
    どうしてもビッグ画像が上のページの方に戻され表示されてしまいます。

    スクロールした下の方のページの場所で作っても、ビッグ画像がその場所で表示されてほしいのですが
    どうしてもビッグ画像が上のページの方に戻され表示されてしまいます。
    どうすれば、その場所でビッグ画像が止まるのでしょうか?

    要はビッグ画像が上の方へ戻されて表示されないようにするには、どうすればいいでしょうか?

    表現が下手ですみません。よろしくお願いいたします。

  • すごく役立った!サイト制作でさりげなく使われているCSSテクニックまとめ | コムテブログ | 2014.04.21 8:34

    […] CSS(CSS3)のみでLightbox風モーダルウィンドウを作成する方法 | BlackFlag […]

  • BlackFlag | 2014.04.23 0:11

    >本間さん
    コメントありがとうございます。
    このCSSモーダルをご活用いただいている様で
    嬉しく思っております。

    ご質問いただきました件についてですが
    まだ調査等、試せてはいないのですが
    モーダル動作をCSSだけで構成する場合は
    そういった事象は避けられないのではないかと感じています

    スクロール位置をきちんと制御する場合は
    JSを使ったモーダルウィンドウにて実装する方が良いかと思っています。

    CSSのみでもっと汎用的なモーダルウィンドウが実装できましたら
    またここで紹介させていただきます。

    よろしくお願いします。

  • » 保存版!CSS3で出来る素敵なデザインやアニメーションをまとめてみた | 2014.12.17 15:58

    […] ▼記事リンク CSS(CSS3)のみでLightbox風モーダルウィンドウを作成する方法 | BlackFlag […]

  • はるたろう | 2015.04.19 12:34

    サイトに使わせて頂きました!
    誠にありがとうございます。

    1画面で収まるページならいいですが…
    スクロールが可能なページだとウィンドウが開いたまま下にスクロールできてしまうのです。

    これはCSSだけじゃスクロールしないように対策できませんかね…?

  • BlackFlag | 2015.04.19 22:50

    >はるたろうさん
    コメントありがとうございます。
    当記事のCSSモーダルウィンドウをご活用いただいている様で
    嬉しく思っております。

    モーダル展開後のスクロールについてですが
    CSSだけではスクロールを止めることは難しいかもしれませんが
    「.close_overlay」と「.modal_window」の
    「position」プロパティを「fixed」にすることで
    オーバーレイとモーダルウィンドウを固定して
    画面をスクロールさせることが可能になるかと思います。

    お試しください。
    よろしくお願いします。

  • ol | 2016.02.23 16:57

    大変参考になる記事をありがとうございます。

    どうしても腑に落ちないので教えていただきたいのですが、HTMLソース11行~21行はspanで囲まれていながら文章がpで入れられているのはなぜでしょうか。
    表示が崩れるといったことはありませんが、コードとしてインライン要素の中にブロック要素が入ることで使用中のエディタにエラーが出ます。
    そこは自分で作るときに変えれば済む話かもしれませんが気になってしまいまして・・。

  • BlackFlag | 2016.02.28 10:46

    >olさん
    コメントありがとうございます。

    HTML構成については仰るとおりで
    特にそうしていないといけない理由もないと思いますので
    構成を修正させていただきました。
    (正直、5年前に作ったものなので当時なぜそうしていたのかは覚えておらず…です…)

    再度HTML構成をご確認いただければと思います。
    よろしくお願いします。

  • しーぱー | 2017.03.02 18:46

    はじめまして。
    ホームページで、モーダルウィンドウを作る際に大変参考にさせていただきました。

    一つ質問をさせていただきたいのですが、モーダルウィンドウを印刷することは可能でしょうか?
    こちらのページで紹介されているモーダルウィンドウも、印刷ができないように思うのですが、
    もし、解決策がありましたら教えていただけると嬉しいです。
    色々と調べられる限りで試してみたのですが、なかなかうまくいきません。
    よろしくお願いします。

  • BlackFlag | 2017.03.06 1:24

    >しーぱーさん
    コメントありがとうございます。

    印刷については、ブラウザのデフォルト値だと
    背景色の印刷をしない設定になっていると思いますので
    ブラウザの設定で背景色を印刷させる設定にすれば
    正常に印刷できるのではないかと思います。

    お試しください。
    よろしくお願いします。

  • ぺこ | 2017.12.20 12:39

    大変参考になります!
    ポップアップが出た際にブラウザに合わせたサイズに固定にする方法はありますか?

    .modal_window {
    top: 50%;
    left: 50%;
    margin: -150px 0 0 -200px;
    width: 400px; ←これを100%にするとくずれてしまいました。
    height: 300px;
    text-align: center;
    display: block;
    background: #fff;
    position: absolute;
    z-index: 10;
    -webkit-transform: scale(0);
    }

  • BlackFlag | 2017.12.23 9:49

    >ぺこさん
    コメントありがとうございます。
    当記事のCSSモーダルをご活用いただいている様で
    嬉しく思っております。

    ご質問いただきました件についてですが
    「.modal_window」セレクタのプロパティを
    以下のように調整すれば可能かと思います。
    ——————–
    top: 0;
    left: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    ——————–

    モーダルウィンドウの中の要素については
    適宜調整していただければと思います。

    お試しください。
    よろしくお願いします。







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。

コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して