FELUGRÓ ABLAK

Ezzel a kóddal a felugró ablak csak egyszer jelenik meg (kivéve ha a látogató törli a böngészőből a cookie-kat). A "Visszavonás" gombra kattintással a ismét megjelenik a felugró ablak a következő látogatás során.

<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>Szókimondó tartalom</h1>
        <p>Szeretnéd folytatni?</p>
        <br>
        <div align="center">
            <button class="cButton cButtonConsent" onclick="closeDialog(&quot;okno&quot;);localStorage.setItem('checkState','true');">Igen</button>
            <button class="cButton cButtonNoConsent" onclick="location.href='https://google.com';">Nem</button>
        </div>
    </div>
</div>

<script>
    openDialog("okno");
</script>

Így fog kinézni az ablak:

A "Belépés" gombra kattintással egyszerűen bezárhatod a felugró ablakot és a sötét háttér eltűnik.

Hova másold a kódot

Az összes oldalra:

Beállítások -> Weboldal beállítások -> Weboldal fejléc és lábléc HTML -> Weboldal fejlécének HTML kódja

Csak egyes oldalra:

Oldalak -> Az oldal, ahova szeretnéd kirakni -> SEO beállítások -> Egyedi HTML kód a fejlécbe

Szeretnéd megváltoztatni a felugró szöveget?

Ha szeretnéd változtatni a felugró ablakban lévő szöveget, ezt megteheted. Csak változtasd meg a kiemelt szöveget a következő kódban:

<h1>Szókimondó tartalom</h1>
<p>Szeretnél belépni?</p>
<br>
<div align="center">
    <button class="cButton cButtonConcent" onclick="closeDialog(&quot;okno&quot;)">Igen</button>
    <button class="cButton cButtonNoConcent" onclick="location.href='https://google.com';">Nem</button>
</div>