CSS（CSS3）のみでLightbox風モーダルウィンドウを作成する方法｜BLACKFLAG

jQueryなどのJavaScriptライブラリでは定番のLightBoxやThickBoxといった、ポップアップ型モーダルウィンドウプラグインが様々あります。 ギャラリー要素などコンテンツの見せ方としてモーダルウィンドウは定着しつつありますが、そんなモーダルウィンドウをJavaScriptなどのSCRIPTを使用せずに、CSS（CSS3）のみで実装するサンプルを実験的に作ってみたので紹介してみます。 まずは動作サンプルから。 ※動作環境は基本的にはWebkitブラウザのSafariやChromeのみですが、今回はWebkit以外のブラウザFirefoxなどでもアニメーション以外の動作は実行されます。 CSS3 MODAL WINDOW【SAMPLE01】 ≫サンプル【01】画面はこちらから。（別枠で開きます。） リンクをクリック後に表示される、 ————————————————– ≫モー

[h1rokey0401]

モーダルウィンドウ

[akiryotae]

“/* ContentsArea-------------------------- */#contents { margin: 0 auto; padding: 10px 0 50px 0; width: 100%;} p { padding: 10px 0;} #open01,#open02 { top: 0; left: 0; width: 100%; height: 100%; display: none; position: absolute;} .close_overlay { top: 0; left: 0; width: 100%; height: 100%; displa

[GENS]

アンカー使ってるから、close気をつけないと一番上にスクロールする

[heniha]

.close_overlayはposition: fixed;のほうが

[visca__Barca]

モーダル

[torimoku]

CSS3アニメーションでモーダルウィンドウ（ダイアログ）表示

[nami_kame]

ｃｓｓ３　lightbx