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

CSSだけでモーダルウィンドウを設置できる時代になっていました。 余計なライブラリ等を読み込む必要が無いので、かなり軽量です。 ライトボックス風で見た目もエフェクトもシンプルなので使い勝手が良さそうです。 サンプルデモ・ダウンロードはこちら デモ ダウンロード ウインドウを開くボタンには、 id値をハッシュリンクにして指定しています。 IE7以下では動作しないようですが、 FF、Chrome、safari、IEの最新ブラウザで動作しました。 CSSでできることが増えてきて、 次第にJSとの垣根がなくなってきましたねぇ。 .modal-window { -webkit-transform: translate(0, 100%); -moz-transform: translate(0, 100%); -o-transform: translate(0, 100%); -ms-transfor

[h1rokey0401]

モーダルウィンドウ

[animist]

-webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -o-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); opacity: 1;