Script pre zobrazenie vyskakovacieho okna (od 18 rokov)

Potrebujete na Vaše webové stránky vložiť upozornenie, že web obsahuje informácie (erotické weby, predaj tabakových výrobkov apod.) len pre dospelých?

Môžete použiť HTML kód (script) pre zobrazenie vyskakovacieho okna (od 18 rokov).

1. Nižšie uvedený HTML kód skopírujete (CTRL+C) a vložíte na Váš web (CTRL+V).

2. HTML kód je potrebné vložiť do hlavičky každej stránky, na ktorej chcete upozornenie zobraziť.

V hornej lište editora kliknite na “Stránky” » “Vyberte stránku” » “SEO Nastavenia stránky” » “HTML Hlavička webu“.

4. Do hlavičky vložte (CTRL+V) nižšie uvedený HTML kód a publikujte zmeny.

Potrebný HTML kód je:

<script>
    var checkState= localStorage.getItem('checkState');
    if(checkState=="true"){ 
        function openDialog(okno) {
        document.getElementById(okno).className+= "hidden";
        }
        }else{
        function openDialog(okno) {
        document.getElementById(okno).className+= " show";
        }
    };
    function closeDialog(okno) {
        document.getElementById(okno).className = "dialog-cover";
    }
</script>
<style>
    @media screen and (max-width: 770px) {
        .dialog {
            position: absolute;
            width: 100%;
            left: 0;
            right: 0 !important;
            margin: 0;
            top: 0;
            padding: 10px;
            border-radius: 0;
            padding: 50px 0px;
        }
    }
    .dialog-background {
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.85);
        position: fixed;
        display: none;
        z-index: 99;
    }
    .dialog {
        padding: 40px;
        width: 50%;
        position: fixed; left: 45%; top: 40%;
        height: auto;
        margin-top: -100px;
        margin-left: -25%;
        background: #fff;
        display: none;
        z-index: 100;
        text-align: center;
        border-radius: 3px;
    }
    .cButton {border: none;color: #fff;padding: 10px 30px;cursor:pointer;}
    .hidden {display: none !important;}
    .show .dialog, .show .dialog-background {display: block;}
    .cButtonConsent {border: 1px solid #1ba38c;background: none;color:#1ba38c;}
    .cButtonConsent:hover{background: #1ba38c;color:#fff;}
    .cButtonNoConsent {border: 1px solid #ca5a5b;background: none;color: #ca5a5b;}
    .cButtonNoConsent:hover{background:#ca5a5b;color:#fff;}
    .cButtonNoConsent, .cButtonConsent {transition: .1s linear all;}
    .cButtonThird {background:none;color: #a2a2a2 !important;margin-top: 10px;font-size: 0.9rem;}
</style>
<div id="okno" class="dialog-cover show">
    <div class="dialog-background"></div>
    <div class="dialog">
        <h1>Bylo Vám již 18 let?</h1>
        <p>Stránka obsahuje informace pouze pro dospelé.

Pokud Vám nebylo ješte 18 let, opustte prosím stránku.</p>
        <br>
        <div align="center">
            <button class="cButton cButtonConsent">Pokracovat</button>
            <button class="cButton cButtonNoConsent" onclick="location.href='https://google.com';">Opustit</button>
        </div>
    </div>
</div>
<script>
    openDialog("okno");
    document.querySelector('.cButtonConsent').addEventListener("click", function(){
      localStorage.setItem('checkState','true');
      document.querySelector('#okno').remove();
    });
</script>

var checkState= localStorage.getItem('checkState');

if(checkState=="true"){

function openDialog(okno) {

document.getElementById(okno).className+= "hidden";

}

}else{

function openDialog(okno) {

document.getElementById(okno).className+= " show";

}

};

function closeDialog(okno) {

document.getElementById(okno).className = "dialog-cover";

}

</script>

<style>

@media screen and (max-width: 770px) {

.dialog {

position: absolute;

width: 100%;

left: 0;

right: 0 !important;

margin: 0;

top: 0;

padding: 10px;

border-radius: 0;

padding: 50px 0px;

}

.dialog-background {

width: 100%;

height: 100%;

background: rgba(0,0,0,.85);

position: fixed;

display: none;

z-index: 99;

}

.dialog {

padding: 40px;

width: 50%;

position: fixed; left: 45%; top: 40%;

height: auto;

margin-top: -100px;

margin-left: -25%;

background: #fff;

display: none;

z-index: 100;

text-align: center;

border-radius: 3px;

}

.cButton {border: none;color: #fff;padding: 10px 30px;cursor:pointer;}

.hidden {display: none !important;}

.show .dialog, .show .dialog-background {display: block;}

.cButtonConsent {border: 1px solid #1ba38c;background: none;color:#1ba38c;}

.cButtonConsent:hover{background: #1ba38c;color:#fff;}

.cButtonNoConsent {border: 1px solid #ca5a5b;background: none;color: #ca5a5b;}

.cButtonNoConsent:hover{background:#ca5a5b;color:#fff;}

.cButtonNoConsent, .cButtonConsent {transition: .1s linear all;}

.cButtonThird {background:none;color: #a2a2a2 !important;margin-top: 10px;font-size: 0.9rem;}

</style>

<p>Stránka obsahuje informace pouze pro dospelé.

Pokud Vám nebylo ješte 18 let, opustte prosím stránku.</p>

<br>

<button class="cButton cButtonConsent">Pokracovat</button>

<button class="cButton cButtonNoConsent" onclick="location.href='https://google.com';">Opustit</button>

</div>

openDialog("okno");

document.querySelector('.cButtonConsent').addEventListener("click", function(){

localStorage.setItem('checkState','true');

document.querySelector('#okno').remove();

});

</script>

Online ukážka vyskakovacieho okna

TIP: Pridajte si ikonku Instagram a Facebook do pravého horného rohu na webe vo Webnode. Viac v návode: Ako pridať ikony soc. sietí (FB a Instagram) do hornej časti na webe vo Webnode?

TIP: Vložte si na web online chat pre rýchlejšiu komunikáciu s návštevníkmi Vášho webu. Odporúčam službu, ktorá je zadarmo – Smartsupp

Ďalšie návody

Ako Nastaviť Emailový Marketing vo Webnode cez MailChimp?

Hľadáte jednoduché riešenie pre e-mailový marketing vo Webnode? Chcete na Váš web vložiť vyskakovacie okno (pop-up) pre zber e-mailov? Posielajte svojim odberateľom novinky skrz automatizovaný systém MailChimp. Je to zdarma do 2 000 odberateľov a 12 000 e-mailov...

Ako si vytvoriť web stránku jednoducho a zdarma (Webnode návod)

Chceli ste si niekedy vytvoriť vlastnú webovú stránku úplne od začiatku? Chcete si vytvoriť webstránku alebo e-shop a zviditeľniť sa na Internete? Začnite práve teraz a naučte sa ako si jednoducho vytvoríte svoj prvý vlastný web. Tvorba webu s...

Ako pridať remarketingový kód vo Webnode?

Ako nastaviť remarketing vo Webnode? a Kam vložiť remarketingový kód? V návode Ako pridať konverzný kód vo Webnode? som Vám ukázal jednoduchý postup pre vloženie konverzného kódu pre sledovanie konverzií. Poďme sa teraz spoločne pozrieť na ďalšiu PPC metódu...

Ako nastaviť poštového klienta Gmail s emailom od Webnode?

Chcete prepojiť svoj e-mail u Webnode s Gmail.com a nastaviť Gmail ako poštového klienta? Príjem správ z Webnode do Gmail. V návode Ako Vytvoriť Profesionálny E-mailový Podpis? Jednoducho a ZDARMA som Vám ukázal veľmi jednoduchý spôsob ako si vytvoriť emailový...

Ako sledovať aktivitu návštevníkov Vášho webu pomocou SmartLook?

Chcete pochopiť správanie Vášho klienta na webe? Služba SmartLook Vám s tým určite pomôže. Čo je to "Smartlook" ? Smartlook je online aplikácia pre nahrávanie pohybu myši návštevníkov Vášho webu/eshopu, Pomôže Vám odhaliť chyby na Vašom webe. Použitie...

Ako si vytvoriť mapu s vlastnými bodmi (špendlíky na mape)?

Chcete na web vo Webnode pridať mapu s vlastnými bodmi? V návode Ako správne nastaviť Google Mapu vo Webnode? som Vám ukázal ako vložiť mapu z klasickej adresy v Google My maps. V tomto návode si ukážeme postup pre vytvorenie vlastnej mapy s neobmezedným počtom...

O plugine
Najnovšie príspevky

Viliam

Jednatel vo Webgrow s.r.o.

Baví ma Internet a zvlášť redakčné systémy ako Webnode alebo WordPress s Divi šablónou. Vytvoril som pre Vás portál Wpromotions.eu, aby som Vám pomohol s tvorbou Vašej webovej stránky alebo e-shopu. V prípade potreby ma neváhajte kontaktovať, rád Vám poradím.

Najnovšie články od Viliam (zobraziť všetky)

Ako Nastaviť Emailový Marketing vo Webnode cez MailChimp? - 21.4.2019
Ako si vytvoriť web stránku jednoducho a zdarma (Webnode návod) - 11.4.2019
Ako pridať remarketingový kód vo Webnode? - 1.3.2019

Script pre zobrazenie vyskakovacieho okna (od 18 rokov)

Potrebujete na Vaše webové stránky vložiť upozornenie, že web obsahuje informácie (erotické weby, predaj tabakových výrobkov apod.) len pre dospelých?

Ďalšie návody

Ako Nastaviť Emailový Marketing vo Webnode cez MailChimp?

Ako si vytvoriť web stránku jednoducho a zdarma (Webnode návod)

Ako pridať remarketingový kód vo Webnode?

Ako nastaviť poštového klienta Gmail s emailom od Webnode?

Ako sledovať aktivitu návštevníkov Vášho webu pomocou SmartLook?

Ako si vytvoriť mapu s vlastnými bodmi (špendlíky na mape)?

Viliam

Najnovšie články od Viliam (zobraziť všetky)

Prihláste sa k odberu noviniek zo sveta webových stránok - William promotions

Ďakujem ti za prihlásenie. Ozvem sa čoskoro s novým návodom :)

Odoslať komentár Zrušiť odpoveď

Odporúčam: Vytvorte si web alebo e-shop

Kategórie

Najnovšie články

Najnovšie komentáre

Domény za výhodnú cenu:

Odporúčané: Vytvorte si web alebo e-shop

Anketa

Návštevnosť webu

Kúpte mi kávu ☕

Pár slov od autora

Prihláste sa k odberu noviniek zo sveta webových stránok - William Promotions

Ďakujem ti za prihlásenie. Ozvem sa čoskoro s novým návodom :)

Script pre zobrazenie vyskakovacieho okna (od 18 rokov)

Potrebujete na Vaše webové stránky vložiť upozornenie, že web obsahuje informácie (erotické weby, predaj tabakových výrobkov apod.) len pre dospelých?

Ďalšie návody

Ako Nastaviť Emailový Marketing vo Webnode cez MailChimp?

Ako si vytvoriť web stránku jednoducho a zdarma (Webnode návod)

Ako pridať remarketingový kód vo Webnode?

Ako nastaviť poštového klienta Gmail s emailom od Webnode?

Ako sledovať aktivitu návštevníkov Vášho webu pomocou SmartLook?

Ako si vytvoriť mapu s vlastnými bodmi (špendlíky na mape)?

Viliam

Najnovšie články od Viliam (zobraziť všetky)

Prihláste sa k odberu noviniek zo sveta webových stránok - William promotions

Ďakujem ti za prihlásenie. Ozvem sa čoskoro s novým návodom :)

Odoslať komentár Zrušiť odpoveď

Odporúčam: Vytvorte si web alebo e-shop

Kategórie

Najnovšie články

Najnovšie komentáre

Domény za výhodnú cenu:

Odporúčané: Vytvorte si web alebo e-shop

Anketa

Návštevnosť webu

Kúpte mi kávu ☕

Pár slov od autora

Prihláste sa k odberu noviniek zo sveta webových stránok - William Promotions

Ďakujem ti za prihlásenie. Ozvem sa čoskoro s novým návodom :)

Odoslať komentár Zrušiť odpoveď