ワードプレスでポップアップを連続表示する方法。【プラグインなし】

プログラミング

2024.07.202024.07.22

前回のポップアップ表示の連続版
感想

前回のポップアップ表示の連続版

前回の基本ポップアップ

前回ポップアップを一つだけ表示する方法を紹介しましたが、前回のをベースに『ポップアップ表示→消されたら次のを表示』で合計３回表示されるポップアップにしてみました。必要に応じてポップアップの数を増やせますが、節度を持って使用してください。

document.addEventListener("DOMContentLoaded", function() {
    // ポップアップの情報をリストで保持
    var popups = [
        {
            id: "popup-ad1",
            content: `
                <p>PR 1</p>
                <a href="リンク1" target="_blank"><img src="画像のURL1" alt="" height="250"></a>
                <button class="close-popup">閉じる</button>
            `
        },
        {
            id: "popup-ad2",
            content: `
                <p>PR 2</p>
                <a href="リンク2" target="_blank"><img src="画像のURL2" alt="" height="250"></a>
                <button class="close-popup">閉じる</button>
            `
        },
        {
            id: "popup-ad3",
            content: `
                <p>PR 3</p>
                <a href="リンク2" target="_blank"><img src="画像のURL3" alt="" height="250"></a>
                <button class="close-popup">閉じる</button>
            `
        },
        // 必要に応じてさらにポップアップを追加
    ];

    // ポップアップを生成
    popups.forEach(function(popupInfo) {
        var popup = document.createElement("div");
        popup.id = popupInfo.id;
        popup.className = "popup-ad";
        popup.style.position = "fixed";
        popup.style.left = "50%";
        popup.style.top = "50%";
        popup.style.transform = "translate(-50%, -50%)";
        popup.style.padding = "20px";
        popup.style.backgroundColor = "white";
        popup.style.boxShadow = "0px 0px 10px rgba(0,0,0,0.5)";
        popup.innerHTML = popupInfo.content;
        document.body.appendChild(popup);
    });

    // 閉じるボタンにイベントリスナーを追加
    document.querySelectorAll(".close-popup").forEach(function(button) {
        button.addEventListener("click", function(event) {
            var popup = event.target.closest(".popup-ad");
            if (popup) {
                document.body.removeChild(popup);
            }
        });
    });
});