Automatische popup

Publicatiedatum: 23 november 2022

Met onderstaande code snippet kun je automatisch een popup tonen over de website heen.

Stap 1: Maak de pagina aan die je als popup wilt tonen, vergeet niet om deze "te verbergen in menu".

Stap 2: Maak een globaal blok met een button, de button link je naar de popup-pagina. Stel de link in als "pop-in".

Stap 3: Plaats dit blok op alle pagina's waar je de popup wilt tonen.

Stap 4: Open de blokcode van het blok wat je hebt gemaakt en pas de LESS aan. Neem onderstaande code over. De code zorgt ervoor dat dit blok enkel in de editor zichtbaar is, niet in preview/live. Pas wel de Block-ID's aan zodat deze overeenkomt met het ID/Class van jouw popup block. Je kan deze vinden in de HTML van het blok.

// zorg dat het ID/Class (in dit geval .block-8-1) op regel 2 en 6 overeenkomt met het ID/Class van het blok
#bw-editor .block-8-1 {
    height: 100px;
}
.block-8-1 {
    height: 0px;

    .col-1 {
        align-items: center;
        justify-content: center;
    }

    .box {
        .text-align(center);
    }
}

Stap 5: Voeg de volgende javascript toe.

// zorg dat het ID/Class (in dit geval .block-8-1) op regel 6 overeenkomt met het ID/Class van het blok
// pas het getal (milliseconden) op regel 7 aan om aan te geven hoe snel de pop-up tevoorschijn moet komen na het laden van de pagina.
setTimeout(
  function() 
    {
        $('.block-8-1 a').click();
    }, 5000);

Opmerkingen:

1. Deze popup wordt getoond bij iedere keer dat een pagina opent waar dit blok op staat, je kan dit met een cookie afvangen.

2. Meestal wordt een popup op een enkele pagina geplaatst om irritatie bij bezoekers te voorkomen.