Scripts

JavaScript Welkomst-Popup: Bezoeker doorsturen of behouden?

nov 3, 2026 HTML, Javascript, JS, Script

Gaat je website verhuizen, heb je een gloednieuw platform gelanceerd of wil je bezoekers bij binnenkomst een belangrijke keuze geven? Met dit automatische popup script activeer je direct een melding zodra de pagina geladen wordt.

De bezoeker krijgt de duidelijke vraag: “Wil je naar het nieuwe adres gaan of wil je hier blijven?”

Dit script is perfect voor siteredirects en tijdelijke aankondigingen. Je kunt ook nog instellen dat hij 3 keer wacht voordat de melding weer komt!

Hieronder vind je de complete code om deze popup direct op jouw website te implementeren.

<!-- Start Pop-up Oude Website Script -->
<div id="tj-popup-overlay" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 999999; justify-content: center; align-items: center; font-family: sans-serif;">
    <div style="background: #ffffff; padding: 30px; border-radius: 12px; max-width: 450px; width: 90%; text-align: center; box-shadow: 0 10px 25px rgba(0,0,0,0.2);">
        <h3 style="margin-top: 0; color: #333; font-size: 22px;">Je bezoekt de oude website</h3>
        <p style="color: #666; font-size: 15px; line-height: 1.5; margin-bottom: 25px;">
            Wist je dat er inmiddels een gloednieuwe website is? Klik hieronder om direct naar de nieuwe omgeving te gaan!
        </p>
        <div style="display: flex; gap: 12px; justify-content: center;">
            <a href="https://tooljunkie.nl/" id="tj-popup-yes" style="background: #545454; color: #fff; padding: 12px 24px; border-radius: 8px; text-decoration: none; font-weight: bold; flex: 1;">Ja, naar de nieuwe website</a>
            <button id="tj-popup-no" style="background: #e0e0e0; color: #333; border: none; padding: 12px 24px; border-radius: 8px; font-weight: bold; cursor: pointer; flex: 1;">Nee, hier blijven</button>
        </div>
    </div>
</div>

<script>
(function() {
    const STORAGE_KEY_SHOW = 'tj_popup_show_next';
    const STORAGE_KEY_COUNT = 'tj_popup_skip_count';
    const NEW_SITE_URL = 'https://tooljunkie.nl/';

    // Bepaal of de pop-up deze keer getoond moet worden (elke 4e keer: 3x overslaan, 1x tonen)
    function shouldShowPopup() {
        let showNext = localStorage.getItem(STORAGE_KEY_SHOW);
        
        if (showNext === null) {
            // Eerste bezoek ooit: direct tonen
            localStorage.setItem(STORAGE_KEY_SHOW, 'false');
            localStorage.setItem(STORAGE_KEY_COUNT, '0');
            return true;
        }

        if (showNext === 'true') {
            // Hij mocht getoond worden, reset nu naar de cyclus van 3x overslaan
            localStorage.setItem(STORAGE_KEY_SHOW, 'false');
            localStorage.setItem(STORAGE_KEY_COUNT, '0');
            return true;
        } else {
            // Tel de keren dat hij is overgeslagen
            let count = parseInt(localStorage.getItem(STORAGE_KEY_COUNT) || '0', 10);
            count++;
            
            if (count >= 3) {
                // Na 3 keer overslaan is de 4e keer weer raak
                localStorage.setItem(STORAGE_KEY_SHOW, 'true');
                localStorage.setItem(STORAGE_KEY_COUNT, '0');
            } else {
                localStorage.setItem(STORAGE_KEY_COUNT, count);
            }
            return false;
        }
    }

    // Voer uit zodra de pagina geladen is
    window.addEventListener('DOMContentLoaded', function() {
        if (!shouldShowPopup()) return;

        const overlay = document.getElementById('tj-popup-overlay');
        const btnNo = document.getElementById('tj-popup-no');
        const btnYes = document.getElementById('tj-popup-yes');

        // Toon de pop-up
        overlay.style.display = 'flex';

        // Sluiten als je op "Nee" klikt
        btnNo.addEventListener('click', function() {
            overlay.style.display = 'none';
        });

        // Ook sluiten en doorsturen als ze op "Ja" klikken
        btnYes.addEventListener('click', function() {
            overlay.style.display = 'none';
        });
    });
})();
</script>
<!-- Einde Pop-up Oude Website Script -->

Wil je liever dat de pop-up pas opent wanneer een bezoeker bewust ergens op klikt? Gebruik dan ons JavaScript popup venster via een knop.

Geef een reactie Reactie annuleren

Je moet ingelogd zijn op om een reactie te plaatsen.