CSS3で作る汎用的なモーダルウィンドウ

JavascriptやjQueryモジュールを使って別のコンテンツがレイヤーのように全面に表示されるモーダルウィンドウの実装方法はいくつかありますが、今回はCSSだけを使ってポップアップで開くモーダルウィンドウと、汎用性が高いHTMLの追加だけでいくつでもモーダルウィンドウを追加できる2つの方法をご紹介します。

まずはCSS3だけでモーダルウィンドウを表示する場合の完成イメージはこちら！

CSS3のみでつくるモーダルウィンドウ

See the Pen Simple Modal Window with Only CSS by digistate (@digistate) on CodePen.

上記のコードではJavascriptは不要で、CSS3の:target擬似セレクタを利用して CSSで非表示状態にしているモーダルウィンドウ用のブロック要素(section)ごとにID(modal-one, modal-two, modal-three)を割り振り、各IDへのハッシュリンクを参照先にしたアンカーテキストをボタンのように見せています。

ボタンをクリックすると、:target擬似セレクタのCSSが反映され、モーダルウィンドウが表示される仕組みです。

モーダルウィンドウの外や「×」ボタンをクリックするとモーダルウィンドウは非表示となります。

モーダルウィンドウを追加するには？

HTMLの追加

ここにモーダルウィンドウを追加するには、固有のIDを付けて以下のモーダル用のHTMLを追記します。

<!-- "my-modal" というIDを付与 -->
<section id="my-modal" class="modal">
  <div class="modal-inner">
    ここに表示するコンテンツを記述します。
  </div>
  <a href="#" class="close"><span>close</span></a>
</section>

次に、モーダルに付けた固有のIDへのハッシュリンクを参照先にしたボタンを追加します。

<a href="#my-modal" class="md-btn">Show modal</a>

CSSの追加

さらに、サンプルCSSの一番最後にある「Append modal(target id)」のセクションに先ほど付けたモーダルのID(#my-modal)を:target擬似セレクタを付けて追加します。

/* ****************
 * Append modal(target id)
 * *************** */
#modal-one:target,
#modal-two:target,
#modal-three:target,
#my-modal:target {
  opacity: 1;
  -webkit-transform: translate(0,0);
  -ms-transform: translate(0,0);
  transform: translate(0,0);
}

以上がCSSだけで作るモーダルウィンドウとその追加方法のサンプルでしたが、ちょっとだけJavascriptの助けを借りれば、モーダル用のHTMLだけを追加するだけで新たにモーダルウィンドウを設置できる、さらに汎用性の高いサンプルをご紹介します。

まずはサンプルから！

CSS3 + javascriptでつくる汎用モーダルウィンドウ

See the Pen Simple Modal Window by digistate (@digistate) on CodePen.

このJavascriptを使ったサンプルでは、モーダルを表示するボタン用の要素(.md-btn)のクリックイベントをjQueryで検知して関連付けられたモーダルウィンドウを表示する仕組みです。

スクリプトが組めなくても大丈夫。
このサンプルではCSSとJavascriptを修正する必要はなく、HTMLさえ分かればいくつでもここにモーダルウィンドウを追加できるようになっています！

モーダルウィンドウを追加するには？

モーダルウィンドウ用コンテンツを追加

まずはモーダル用のHTMLを追加します。
追加する箇所は

<section class="modal-area">〜</section>

の中に以下のHTMLを記述します。

追加する際は、モーダル要素(div)に modal クラスを付けて、さらにこのモーダル固有の任意のクラス(ここでは my-modal )を付けておきます。

<div class="modal my-modal">
ここにコンテンツを記述します。
<div class="close"><span>close</span></div>
</div>

ボタンの追加

新たなモーダルを表示するためのトリガーとなるボタン用の要素を追加します。
ボタンであることを認識させるために md-btn クラスと先ほどモーダルウィンドウに付けた固有のクラスを並べればオーケー！

<span class="md-btn my-modal">Show modal</span>

あとは、Javascript側でボタンのクリックを検知し、ボタンの md-btn クラスと同時に指定された隣接する固有のクラスを取得して同じクラスを持つモーダルウィンドウを表示します。