クリックした画像を全画面表示

クリックした画像を全画面（オーバーレイ）で表示。

デモページを表示

CSS

補足

• FRAME-IMG クラスがついた要素を全画面で表示し z-index でオーバーレイ表示している。
• さらに、全画面表示を閉じるボタンを、その上（手前）に表示されるよう z-index を設定している。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• frame-img と clickable クラスがついた画像枠をクリックした時に、全画面用の画像枠を複製している。
• 同時に、全画面表示を閉じるためのボタンも追加している。
• 全画面表示を閉じるボタンをクリックした時に、そのボタンと全画面用の表示枠を削除している。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• 画像枠の span 要素に frame-img に加えて clickable クラスをつけている。
• frame-img クラスは、画像をレスポンシブ対応させるためにつけている。
• spacer-1x1.png は１ピクセル×１ピクセルの透過PNG画像。実際に表示させる画像は data-bg 属性で指定している。

関連投稿

• スクロール時に画像を遅延読み込み（アスペクト比指定＆レスポンシブ対応）
• 正方形でない画像を正方形内に表示（レスポンシブ対応）

アコーディオンパネルのオーバレイ表示バージョン。

アコーディオンパネルのオーバレイ表示バージョン。dt 要素をクリックした時に、対応する dd 要素を、dt 要素の下ではなく、全画面表示する。

デモページを表示

CSS

補足

• 33行目以降：オーバーレイ表示に関する設定。
• 51行目以降：動的に追加しているオーバーレイを閉じるボタンの設定。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• 5～6行目：オーバーレイ表示する dd 要素に閉じるボタンを動的追加し，selected クラスを追加してオーバーレイ表示。
• 10～12行目：動的追加した閉じるボタンを削除し、selected クラスの付いたオーバーレイ表示されている dd 要素を非表示にしている。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• dl 要素に overlay-panel クラスを付けている。

関連投稿

• 開閉アイコン付きアコーディオンパネル

クリックで全画面表示のお知らせを表示

あらかじめ非表示にしている「お知らせ」などの内容を、クリックで全画面オーバーレイ表示する。

デモページを表示

CSS

補足

• 32～45行目：動的に追加している閉じるボタンの設定。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

jQuery

補足

• 4行目：読み込み時に閉じるボタンを動的に追加している。
• デモページで使用している jQuery のバージョンは 1.12.4 。

HTML

補足

• 1行目：お知らせを表示するバー（クリックすると表示される）。
• 6～13行目：お知らせの内容は CSS で非表示にしている。