梅酒.inのトップページにある「梅酒がウリな飲食店」というコーナーにある画像をクリックすると、Lightboxっぽく情報を表示するようにしています。 ↑ こんな感じ。 Lightbox効果を実現するライブラリは検索すれば色々と見つかると思いますが、ここではライブラリはjQueryのみとして、どのようにLightboxを実現したかを説明します。 処理のおおまかな流れは以下の通りです。 select要素を隠す (IE対策) ページ全体に半透明の黒いレイヤーを表示する 表示領域の中央に目的のコンテンツを表示する 1. select要素を隠す IE6ではselect要素にz-indexが定義されていないため、レイヤーのz-indexをどれだけ大きくしても、IE6ではselect要素がレイヤーの下に隠れることはありません。そのため、ページ上にあるselect要素を隠す必要があります。 jQueryで
![jQueryのみでLightboxっぽいものを実現する方法 - F.Ko-Jiの「一秒後は未来」](https://cdn-ak-scissors.b.st-hatena.com/image/square/9c868387372c3f0395939703a81ce58fbbbd61e5/height=288;version=1;width=512/https%3A%2F%2Fblog.fkoji.com%2Fwp-content%2Fuploads%2F2017%2F01%2Fumeshu-in-lightbox.gif)