Hostujemytanio – Hosting stron WWW

Prosty popup w func...
 
Powiadomienia
Wyczyść wszystko

Prosty popup w function - raz na sesje

1 Wpisy
1 Użytkownicy
0 Reactions
1 Widoki
David
Admin
Wpisy: 13
Reputacja przyznana:
0 0
Rozpoczynający temat
 

Prosty skrypt na popup ktory wklejamy w functions.php w stylu potomnym.

Popup pojawia sie raz na sesję czyli zamknecie przeglądarki resetuje licznik i pojawi sie ponownie, natomiast użytkownik będąc na stronie nie bedzje nękany ciągłym wyskakującym okienkiem.

Kod:

add_action('wp_footer', function () {
    ?>
    <style>
        #simple-popup {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.6);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 9999;
        }
        #simple-popup .popup-box {
            background: #fff;
            padding: 30px;
            max-width: 400px;
            width: 90%;
            border-radius: 8px;
            text-align: center;
        }
        #simple-popup button {
            margin-top: 20px;
            padding: 10px 20px;
            cursor: pointer;
        }
    </style>


    <div id="simple-popup">
        <div class="popup-box">
            <h3>Hej! 👋</h3>
            <p>To jest popup wyświetlany raz na sesję.</p>
            <button id="popup-close">Zamknij</button>
        </div>
    </div>


    <script>
        document.addEventListener("DOMContentLoaded", function () {
            if (!sessionStorage.getItem("simplePopupShown")) {
                const popup = document.getElementById("simple-popup");
                popup.style.display = "flex";


                document.getElementById("popup-close").addEventListener("click", function () {
                    popup.style.display = "none";
                    sessionStorage.setItem("simplePopupShown", "1");
                });
            }
        });
    </script>
    <?php
});

Działa z elementorem itp.


Główny administrator i założyciel hostujmytanio.pl

 
Opublikowano : 03/02/2026 12:14 am
Udostępnij: