ASCII.jp：jQueryによるLightbox風モーダルウィンドウの作り方｜Web制作の現場で使えるjQuery UIデザイン入門

HTMLとCSSによる表現を考える 複数のサムネイル画像を並べておき、画像をクリックするとモーダルウィンドウで拡大画像を表示するWebページを作成します。はじめに、HTML／XHTML（以下、HTML）とCSSでどのようにモーダルウィンドウを表現するか、静的なページを作って考えてみましょう。 HTMLは、ul/li要素で並べたサムネイル画像の後に、「glayLayer」と「overLayer」というid属性をつけたdiv要素を配置します。glayLayerはページ全体に重ねる半透明のレイヤーを表示するための要素で、overLayerは子ウィンドウを表示するための要素です。子ウィンドウに表示したい要素（今回はimg要素）はoverLayer内に配置します。 ▼サンプル01（HTML部分） <h1>jQueryを利用したモーダルウィンドウの作成</h1> <ul> <li><a href="i

[witchstyle]

(2009/11/26のエントリ)

[tamata2]

IE6対応

[NEPPIE]

Lightboxライブラリを使わずに自作で行うことが出来る。業務で実践してみたいと思います。

[potechinn]

サムネイルをクリックしたら画像が拡大される形式

[nilab]

ASCII.jp：jQueryによるLightbox風モーダルウィンドウの作り方 ｜Web制作の現場で使えるjQuery　UIデザイン入門

[confuru]

作り方探してました！！

[bigbro]

ポップアップウィンドウ・モーダルウィンドウ

[hukumarukun]

j

[sakuragaoka]

やっぱmargin:0;とpadding:0;は設定するんだ・・