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