🍦 バニラジェイ

このポストでは、シンプルなCSSとバニラJSライトボックスを共有したい.
以下はデモGitHubページです.
👉 https://yossi-abramov.github.io/simple-lightbox.github.io/
プロジェクトのGithubリポジトリ
👉 https://github.com/yossi-abramov/simple-lightbox.github.io
このデモのためのHTMLは簡単に従うので、私はそれ以上行くことはありません.関連するCSSとコードのJS部分をカバーしましょう.

CSS
我々のLightboxは、2つの州を持ちます:隠れて、目に見えます.隠し状態から始めましょう.

.lightbox{
    opacity: 0;
    visibility: hidden;
    position: fixed;
    left:0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease-in;
}

ご覧のように、ライトボックスが入っていますfixed 位置と方向のプロパティを0 . これは、ライトボックスを画面全体の任意の種類を使用せずに画面を埋めるになりますwidth or height プロパティ.この位置決め戦略はまた、より多くの状況において非常に有用であり得る.たとえば、イメージオーバーレイを作成することを考えます.あなたが配置されるイメージコンテナを持っているかもしれませんrelative と.overly 位置するabsolute . すべての方向プロパティを設定する0 イメージオーバーレイは完全に親コンテナを塗りつぶすことができます.
Lightboxの見える状態のスタイルはとても簡単です.

.lightbox.show{
    background-color: rgba(0,0,0, 0.85);
    opacity: 1;
    visibility: visible;
    z-index: 1000;
}

ページの読み込み時に表示されるライトボックスのフラッシュを避けるためにbackground-color 隠れた州スタイルで.

js
私たちのライトボックスのJavaScriptもかなり簡単です!この場合、カバーする三つの機能があります.

可視と隠れたライトボックスの状態を切り替える

2 )照明ボックスに被写体画像を表示する

3 )中心の(被写体)画像にないクリックごとにライトボックスを隠す

document.addEventListener("DOMContentLoaded", () => {

    // ===> DOM elements <=== //

    const $imagesContainer = document.getElementById('images-container');
    const $lightbox = document.getElementById('lightbox');

    // ===> Event listeners and triggers <=== //

    // Show lightbox 
    $imagesContainer.addEventListener('click', e => {
        const imageWrapper = e.target.closest('.image-wrapper');

        if (imageWrapper) {
            const image = imageWrapper.querySelector('img');
            if (image) {
                $lightbox.innerHTML = '<div class="close-lightbox"></div>' + image.outerHTML;
                $lightbox.classList.add('show');
            }
        }
    });

    // Hide Lightbox
    $lightbox.addEventListener('click', (e) => {
        if (!e.target.hasAttribute('src')) {
            $lightbox.classList.remove('show');
        }
    });
});

隠れた状態と見える状態の間をトグルするためには、.show クラス.我々は、使用することができたclassList.toggle() しかし、この例ではclassList.remove() and classList.add() コードをより読みやすくします.
LightBoxを表示するには、静的なイメージ要素を使いたくないsrc and alt 別のプロパティ(イメージ要素上で持つことができるすべてのHTML属性を考えます...............).この理由で私はimage.outerHTML . しかし、これは単純なライトボックスのためのちょうど私の提案です、そして、それを実装する多くの方法があります!
✍ その他のポスト
https://yossiabramov.com/