モーダルウィンドウをCSSだけで設置する方法「CSS Modal」軽量かつJS不要!

      2015/11/17

モーダルウィンドウをCSSだけで設置する方法「CSS Modal」軽量かつJS不要!

CSSだけでモーダルウィンドウを設置できる時代になっていました。

余計なライブラリ等を読み込む必要が無いので、かなり軽量です。
ライトボックス風で見た目もエフェクトもシンプルなので使い勝手が良さそうです。

サンプルデモ・ダウンロードはこちら

ウインドウを開くボタンには、
id値をハッシュリンクにして指定しています。

IE7以下では動作しないようですが、
FF、Chrome、safari、IEの最新ブラウザで動作しました。

CSSでできることが増えてきて、
次第にJSとの垣根がなくなってきましたねぇ。

CSS

 

HTML

 

サンプルデモ・ダウンロードはこちら

CSSだけでモーダルウィンドウを実現「CSS Modal」

http://drublic.github.io/css-modal/