IE8以上ならもうスクリプト無しでOKのモーダルウインドウを表示するスタイルシート -CSS Modal

テキストや画像などのリンクをクリックすると、画像をはじめあらゆるHTMLの要素が配置可能なモーダルウインドウを表示するスタイルシートを紹介します。

CSS Modal
CSS Modal -GitHub

• CSS Modalのデモ
• CSS Modalの使い方

CSS Modalのデモ

デモはIE9を含む、すべての最新のモダンブラウザでご覧ください。モバイル系は、iOS, Android2/3/4のMobile Safariで非常に機能し、Windows Phone8でも機能します。
IE7以下は非サポートで、IE8はエフェクトなしで機能します。

まずは、テキストを配置したモーダルウインドウから。

Modal Text

モーダルウインドウ内にトリガーを設定することも可能で、「Open a new modal」をクリックすると別のウインドウが開きます。
ウインドウを閉じるには、右上のクローズをクリックか、何もないとこをクリックします。

続いて画像。

Modal Pictures

画像はLightboxのように大きい画像でも、複数をレイアウトすることもできます。

最後は動画。

Modal Video

CSS Modalではテキストをはじめ、画像でも動画でも配置できます。

ちなみに、IE8だとこんな感じです。

Modal Text：IE8で表示

エフェクトは少なくなりますが、機能は問題ありません。

CSS Modalの使い方

実装はいたってシンプルで、セマンティックです。

Step 1: HTML

モーダルウインドウに表示するコンテンツは下記のように実装します。
ページ内の自由な位置に配置してください。

<section class="semantic-content" id="modal-text" tabindex="-1"
        role="dialog" aria-labelledby="modal-label" aria-hidden="true">

    <div class="modal-inner">
        <header id="modal-label"><!-- Header --></header>
        <div class="modal-content"><!-- The modals content --></div>
        <footer><!-- Footer --></footer>
    </div>

    <a href="#!" class="modal-close" title="Close this modal"
        data-dismiss="modal">×</a>
</section>

headerとfooterは任意で、必要なければ削除して使用してください。
L.10のクローズボタンは無くても閉じることはできますが、あった方が親切でしょう。

モーダルウインドウを開くトリガーは、idの値をハッシュリンクとして指定します。

<a href="#modal-text">モーダルを開く</a>

Step 2: CSS

当スタイルシートを外部ファイルとして記述するだけです。

<link rel="stylesheet" href="css/modal.css">

カスタマイズは下記ページをご覧ください。Sassも用意されています。

How to Markup -CSS Modal