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 language="javascript" type="text/javascript">
    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 type="text/css">

    @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: 0px;
        width: 50%;
        position: fixed; left: 25%; top: 40%;
        height: auto;
        margin-top: -100px;
        margin-left: 0px;
        background: #fff;
        display: none;
        z-index: 100;
        text-align: center;
        border-radius: 3px;
    }
    .dialog-inner {
        padding: 30px;
    }
    .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">
        <div class="dialog-inner">
            <h1>Bylo Vám již 18 let?</h1>
            <p>Vstupujete na stránky s prodejem alkoholu. Prosím potvrïte, že Vám již bylo 18 let.</p>
            <br />

            <div align="center">
                <button class="cButton cButtonConsent">Ano</button>
                <button class="cButton cButtonNoConsent" onclick="location.href='https://google.com';">Ne</button>
            </div>
        </div>
    </div>
</div>


<script language="javascript" type="text/javascript">
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>

@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: 0px;

width: 50%;

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

height: auto;

margin-top: -100px;

margin-left: 0px;

background: #fff;

display: none;

z-index: 100;

text-align: center;

border-radius: 3px;

}

.dialog-inner {

padding: 30px;

}

.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>Vstupujete na stránky s prodejem alkoholu. Prosím potvrïte, že Vám již bylo 18 let.</p>

<br />

</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 premenovať “Košík” v menu vo WEBNODE e-shope?

Chceli by ste premenovať košík v e-shope vo Webnode z "Košík" na napr. "Môj košík" ? S mojim jednoduchým návodom to určite zvládnete. Stačí sa prihlásiť do môjho newslettra - William promotions news - a získať predpripravený kód. V kóde jednoducho zmeníte text...

Ako na web vo WEBNODE pridať animáciu písajúcej ceruzky?

Chcete zaujať Vaše publikum? Chceli by ste si vylepšiť Váš web? Vytvoril som pre Vás kód, ktorý umožní na Vašom webe , či e-shope vo WEBNODE zobraziť animáciu písajúcej ceruzky. V kóde si môžete zvoliť vlastný text, aby ceruzka písala presne to, čo chcete! :)...

Ako pridať rozbaľovacie záložky (FAQ) na web vo WEBNODE ?

Chceli by ste si na webové stránky vo Webnode pridať FAQ ?V návode Ako zobraziť a skryť text po kliknutí na tlačítko “Viac textu” ? som Vám ukázal jednoduchý spôsob ako na webe skryť text. V tomto návode si ukážeme, ako je možné pomocou môjho kódu vytvoriť na...

Ako vytvoriť jednoduchý vizitkový web?

Ako vytvoriť jednoduchý vizitkový web? (scroll-ovací web)Čo je to vizitkový web? Vizitkový web je jednoduchý web, ktorý stručne a jasne predstavuje Vaše služby, či produkty. Je to jednoduchá webová stránka, ktorá slúži pre získanie základných informácií o Vašej firme....

Ako si vytvoriť vlastnú pätičku vo Webnode?

Chceli by ste na web/e-shop pridať vlastnú pätičku (footer) vo Webnode?Chceli by ste si na webové stránky, či e-shop vo Webnode pridať presmerovanie resp. odkaz na Vaše obchodné podmienky&GDPR do pätičky? S mojim jednoduchým návodom to určite zvládnete. Stačí sa...

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...

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

O plugine
Najnovšie príspevky

Follow me

Viliam

CEO 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.

Follow me

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

Ako premenovať “Košík” v menu vo WEBNODE e-shope? - 14.6.2020
Ako na web vo WEBNODE pridať animáciu písajúcej ceruzky? - 10.6.2020
Ako pridať rozbaľovacie záložky (FAQ) na web vo WEBNODE ? - 7.6.2020

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 premenovať “Košík” v menu vo WEBNODE e-shope?

Ako na web vo WEBNODE pridať animáciu písajúcej ceruzky?

Ako pridať rozbaľovacie záložky (FAQ) na web vo WEBNODE ?

Ako vytvoriť jednoduchý vizitkový web?

Ako si vytvoriť vlastnú pätičku vo Webnode?

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

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

Kúpte mi kávu ☕