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

Vytvorte si vlastný web alebo e-shop

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 zvýšiť predaj v e-shope o 7-18 % ?

Chcete zvýšiť predaj na Vašom e-shope? Máte návštevníkov, avšak len málo ľudí si niečo kúpi? V tomto návode Vám ukážem skvelý spôsob ako zvýšiť predaje v e-shope. Sú to notifikácie. Áno - obyčajné, pre niekoho možno otravné, notifikácie. Online nástroj Notifikuj.cz sa...

Ako vo Webnode skryť košík v eshope?

Ako vo Webnode e-shope skryť nákupný košík?Máte u spoločnosti Webnode vytvorený e-shop a chceli by ste skryť nákupný košík v menu a tlačítko "Pridať do košíku", aby ste mohli využívať e-shopové prvky ako napr. pridávanie produktov, avšak nechcete využívať e-shop ako...

Ako na web vo Webnode vložiť anketu?

Chcete na webové stránky vo Webnode vložiť anketu?Online dotazník zdarma (anketa na web) je jeden z najčastejších spôsobov ako dostať od návštevníkov webu spätnú väzbu. Bez spätnej väzby je ťažké posúdiť, či na svojich zákazníkov pôsobíte správne a či má vôbec Vaše...

Ako pridať obrázok GIF vo Webnode?

Chcete na web vo Webnode vložiť GIF obrázok? Systém Webnode nepovoľuje gify, keď ich vložíte ako obrázok. Z tohto dôvodu musíte najprv požadovaný .GIF obrázok nahrať na externú stránku a získať tak URL adresu obrázku. Získanú URL adresu vložíte do kódu a HTML kód...

Online rezervačný systém na web? Odporúčam systém, ktorý sa prispôsobí každému podnikaniu

Chcete na Váš web pridať spoľahlivý a jednoduchý online rezervačný systém? Reservanto je najlepší rezervačný systém, ktorý ponúka verziu Zdarma bezplatne a to dožitovne. Jedným z cieľov Vášho webu môže byť napríklad vytvorenie rezervácie. Najčastejšie túto formu...

Ako prepojiť Facebook Messenger s webom u Webnode?

Chcete prepojiť Facebook Messenger s webom u Webnode a získať tak "online chat" na webe úplne zdarma? Jednoduchý návod na prepojenie webu u Webnode s Facebook Messenger Facebook Messenger je skvelou voľbou pre komunikáciu s návštevníkom Vášho webu. Po kliknutí na...

Pomohol ti tento návod? Pošli ho priateľom 🙂

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 zvýšiť predaj v e-shope o 7-18 % ? - 1.10.2019
Ako vo Webnode skryť košík v eshope? - 27.9.2019
Ako na web vo Webnode vložiť anketu? - 12.8.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 zvýšiť predaj v e-shope o 7-18 % ?

Ako vo Webnode skryť košík v eshope?

Ako na web vo Webnode vložiť anketu?

Ako pridať obrázok GIF vo Webnode?

Online rezervačný systém na web? Odporúčam systém, ktorý sa prispôsobí každému podnikaniu

Ako prepojiť Facebook Messenger s webom u Webnode?

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

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

Návštevnosť webu

Kúpte mi kávu ☕

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 :)