ちいつる

演出・リッチ

ライトボックス

サムネイルをクリックすると暗いオーバーレイと拡大表示が現れる。背景か × ボタンで閉じる。

ENGLISH

Lightbox

  • JS
約123行演出・リッチ の一覧 →

プレビュー

クリック

操作クリック／タップで動きます。

コード（コピーして使えます）

<div class="lb-stage">
  <p class="lb-label">クリックで拡大</p>
  <div class="lb-thumbs">
    <div class="lb-thumb" data-label="作品 A" data-bg="linear-gradient(135deg,#2b50c7,#5a7bff)"></div>
    <div class="lb-thumb" data-label="作品 B" data-bg="linear-gradient(135deg,#e86c4d,#f5a623)"></div>
    <div class="lb-thumb" data-label="作品 C" data-bg="linear-gradient(135deg,#2dc793,#2b50c7)"></div>
  </div>
  <!-- オーバーレイ（absolute で枠内完結） -->
  <div class="lb-overlay" hidden>
    <div class="lb-box">
      <div class="lb-big"></div>
      <p class="lb-title"></p>
    </div>
    <button class="lb-close" aria-label="閉じる">&times;</button>
  </div>
</div>

タグ

関連パーツ