CSSだけで簡単にモーダルウィンドウが作れるライブラリー！

こんにちは。フローラです。
ヘルプファイルやちょっとしたインフォメーションを表示させるのに便利なモーダルウィンドウ。
モーダルウィンドウはJavaScriptで作るのが一般的だったと思いますが、CSSだけで簡単に作れるのはご存知ですか？
CSSだけで作れるのでプログラミングの知識の必要がなく軽量です。またIE9+、Safari、Chrome、Firefoxと主要なブラウザで動作します。
今回はCSSだけでモーダルウィンドウを実装する方法をご紹介します！

CSSだけで簡単にモーダルウィンドウが作れるライブラリーLight-Modal

https://github.com/hunzaboy/Light-Modal
Light-ModalはGithubに置かれています。
（無料で自由に使用できる）でGithubから入手することができますが、ライセンスについては必ずご確認していただき、自己責任でお願いします。
LICENSE

では早速デモを見てみましょう

Light Modal | Pure CSS
CSSだけで簡単にモーダルウィンドウを作る！
中央ボタンからウィンドウのデザインが選べます。
シンプルなウィンドウ、ヘッダーフッターのあるウィンドウ、イメージとキャプションのウィンドウ、ネクストボタンのあるギャラリーウィンドウです。

アニメーションは下にあるプルダウンで変化が付けられます。
こちらはAnimate CSSがベースになっています。
https://daneden.github.io/animate.css/

実装のポイント
  1. CSSファイルをhead内で指定
  2. HTMLを記述する
  3. アニメーションを付ける場合はAnimate CSSへの外部ファイルとclassを追加
CSSファイルをhead内で指定

Githubにサインインして対象のプログラムを表示させると右上にDownloadボタンが表示されます。
CSSだけで簡単にモーダルウィンドウが作れるライブラリー！

<dist/css/light-modal.min.css>

をご自身のサーバー上にアップロードしてください。

HTMLを記述

まずリンクボタンを記述します。続けてその下にモーダルウィンドウを記述します。
htmlソースはdemo pageをご参照ください。
CSSだけで簡単にモーダルウィンドウが作れるライブラリー！

アニメーションを付ける場合はAnimate CSSへの外部ファイルとclassを追加

head内にAnimate CSSへのリンクを追加し、「.light-modal-content」にアニメーションのclassを追加するだけです。
Animate CSSへのリンク

<link rel="stylesheet" href="animate.min.css">

「.light-modal-content」にアニメーションのclassを追加する例

<div class="light-modal-content animated zoomInUp">
最後に・・・

いかがでしたでしょうか。モーダルウィンドウを使用することで表現の幅が広がりますね。
是非ご活用してみてください。
それでは、また！

投稿者プロフィール

kinukawahiroyasu
投稿タグ
, , , ,