https://notes.kinoshita-lab.org/static/lightbox.js

1// 画像ライトボックス: 記事本文(.article-body)の画像クリックで原寸表示する。
2// Esc は <dialog> のネイティブ挙動。背景(::backdrop)クリックと画像クリックで閉じる。
3(function () {
4  var dialog = document.createElement('dialog');
5  dialog.id = 'lightbox';
6  dialog.setAttribute('aria-label', '画像の原寸表示');
7  var img = document.createElement('img');
8  dialog.appendChild(img);
9  document.body.appendChild(dialog);
10
11  // 背景クリックと画像自体のクリックで閉じる。
12  // 画像上のドラッグ移動(スクロール操作)はブラウザが click を発火しないため誤閉じしない。
13  dialog.addEventListener('click', function (e) {
14    if (e.target === dialog || e.target === img) dialog.close();
15  });
16
17  // イベント委譲: 本文の img のみ捕捉。リンク(<a>)内の画像はリンク優先で除外。
18  document.addEventListener('click', function (e) {
19    var target = e.target;
20    if (!(target instanceof HTMLImageElement)) return;
21    if (!target.closest('.article-body') || target.closest('a')) return;
22    // srcset 非使用だが currentSrc を優先(将来のピクチャー対応でも実表示をコピー)
23    img.src = target.currentSrc || target.src;
24    img.alt = target.alt;
25    dialog.showModal();
26  });
27})();