Script für Cookie wenn Button gedrückt wird

URL-Adresse des Forums:https://thestoryteller.forumieren.de
Rang/Funktion im Forum: Administrator
Forenversion: ModernBB
Browser:Firefox
Persönliches CSS(Ja/Nein): JA
Templateänderungen(Ja/Nein): JA

Hallo zusammen,

der Titel ist nicht ideal, ich weiß, aber ich wollte es für jeden verständlich machen.

Ich habe auf meiner Startseite (=Portal) ein Overlay eingebaut und auch einen Button inkl. Script, dass sich dieses schließt, wenn man den Button betätigt.

Allerdings erscheint das Overlay jedesmal, wenn man die Seite lädt, ergo brauche ich einen Cookie.

Ich habe sowohl hier, als auch im Internet gesucht und auch ein Script gefunden. Ich habe das Script in mein portal_body eingefügt, aber irgendwie funktioniert das nicht.

Anbei mein Template. (Ich habe euch nur die betroffenen Stellen eingefügt)

Es wäre super, wenn jemand drüberschauen könnte, wo der Fehler ist, bzw. ob ich das überhaupt richtig gemacht habe. Ich habe in meinen BrowserEinstellungen, dass Cookies erst beim Beenden der Sitzung gelöscht werden. Es eilt auch nicht.

Vielen Dank vorab.

Code:



/*Cookie Script*/
<script>
  function setCookie(cname, cvalue, 0) {
  var d = new Date();
  d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
  var expires = "expires="+d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
  var name = cname + "=";
  var ca = document.cookie.split(';');
  for(var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}
  function checkCookie() {
  var username = getCookie("username");
  if (username != "") {
     } else {
       if (username != "" && username != null) {
      setCookie("username", username, 0);
    }
  }
}

 </script>
/*Cookie Script Ende, onclick event weiter unten*/


/*PortalInhalt*/

/*Overlay*/
<div id="simple_overlay" class="simple_overlay" onload="checkCookie()"><div align="center" style="background-image: url(https://i.servimg.com/u/f18/18/65/71/67/halbtr18.png); width:100%; height: 100%; margin-top:-1850px; position:fixed; left:0px;">
                                                                                             
<p>
                                         <br /><br />      <span style="color: rgb(255, 255, 255);font-size: 18px"><span style="font-size: 24px;"><span style="font-size: 30px;">H</span>erzlich Willkommen </span> <br /><br /> Es freut uns, dass du den Weg zu The Storyteller gefunden hast.  <br /><br />Wir würden uns freuen, wenn du unserer Community beitreten und uns mit deinen Stories bereichern würdest. <br /> <br /> Die Registrierung und Nutzung ist <strong><span style="color: #00cc99;">kostenlos</span></strong>. <br /> <br /> Solltest du dich dazu entschließen, dass das Forum nichts für dich ist, lass uns doch bitte einen Kommentar im Bereich Vorschläge dar.  <br /><br />Wir freuen uns auf dich und auf die spannenende Diskussionen mit dir!  <br /><br /> Liebe Grüße <br /> <img src="https://i.servimg.com/u/f18/18/65/71/67/logo_h11.png" /><br />  </span>                      
</p>
                                               
<hr /><span style="font-size: 18px;"><span style="color: #ffffff;">Auf der nächsten Seite findest du eine kleine Übersicht über dieses Forum.<br /> <br />Sieh dich in Ruhe um.<br /> <br /> Es gibt allerdings einige Bereiche, die erst freigeschalten werden, wenn du ein registriertes Mitglied bist.</span></span><br />   <br />                          
                                                       
<p>
                            <span style="font-size: 18px;"><span style="color: #ffffff;">Falls du Fragen hast, kannst du sie jederzeit live in der Speechbox stellen (Voraussetzung: <span style="color: rgb(204, 153, 0);"><img src="https://i.servimg.com/u/f18/18/65/71/67/crown-18.png" />Admin</span> oder <span style="color: silver"><img src="https://i.servimg.com/u/f18/18/65/71/67/star-613.png" />Moderator</span> sind online). Oder unter dem Bereich Q&A in der Gästelounge.<br /></span>  </span>                          
</p>
                             <br />                                                  
<p>
 <button class="simple_overlay"style="background-color:seagreen; border:1px solid transparent" onclick="off()" [color=#0000ff]onClick="my_setcookie('simple_overlay',(my_getcookie('simple_overlay')=='1'?'0':'1'),1,0);updatesimple_overlay();">[/color]
                                    <span style="font-size: 24px; color:black; text-decoration:none">Los geht's</span>                                                
                 </button>
                            <br /><br />       <br /><br /><br />                                                        
</p>
                                                                                               
         </div></div>
         <script>          function off() {
 document.getElementById("simple_overlay").style.display = "none";
           }
         
</script>

Hallo @Kyra,

Was soll dieser Code tun? Eine Warnung anzeigen und wenn ich auf eine Schaltfläche klicke "verschwinden"? Danke

Hallo @pedxz,

vielen Dank für deine Anwort und entschuldige, dass meine Frage undeutlich war.

Der Code soll, wenn man den Button drückt, der das Overlay schließt, dafür sorgen, dass das Overlay nicht erneut erscheint, wenn man z.B. die Seite neu lädt.
Im Prinzip wie ein "Nicht erneut anzeigen" Button, z.B. wie beim Login-Popup oder beim Cookie-Popup.

Ist das möglich?

Ich hatte es schon einmal über das Login-Popup gelöst, allerdings sah das komisch aus und ich war nicht so ganz mit dieser Lösung zufrieden.

Danke für dein Bemühen.

LG

Ich werde eine Lösung teilen, die ich im portugiesischen Support-Forum verwende. Wenn Ihnen das Erscheinungsbild nicht gefällt, sagen Sie mir, was Sie tun möchten:

Code:

<style>
  .fm-alert {
  display: none;
  position: fixed;
  bottom: 16px;
  right: 16px;
  padding: 20px;
  background-color: #f44336;
  color: white;
  z-index: 9999!important;
  line-height: 20px;
  width: 35%!important;
  word-break: break-all;
  box-sizing: border-box;
  }
  .fm-alert > .closebtn {/*
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 22px;
  line-height: 20px;*/
  cursor: pointer;
  transition: 0.3s;
  }
  .fm-alert > .closebtn:hover {
  color: black;
  }
  .fm-alert p > a {
  background-color: white;
  color: black;
  padding: 5px 7px;
  float: right;
  }
</style>
<div class="fm-alert">
  <span style="color: rgb(255, 255, 255);font-size: 18px"><span style="font-size: 24px;"><span style="font-size: 30px;">H</span>erzlich Willkommen </span> <br /><br /> Es freut uns, dass du den Weg zu The Storyteller gefunden hast.  <br /><br />Wir würden uns freuen, wenn du unserer Community beitreten und uns mit deinen Stories bereichern würdest. <br /> <br /> Die Registrierung und Nutzung ist <strong><span style="color: #00cc99;">kostenlos</span></strong>. <br /> <br /> Solltest du dich dazu entschließen, dass das Forum nichts für dich ist, lass uns doch bitte einen Kommentar im Bereich Vorschläge dar.  <br /><br />Wir freuen uns auf dich und auf die spannenende Diskussionen mit dir!  <br /><br /> Liebe Grüße <br /> <img src="https://i.servimg.com/u/f18/18/65/71/67/logo_h11.png" /><br />  </span>                     
</p>
                                               
<hr /><span style="font-size: 18px;"><span style="color: #ffffff;">Auf der nächsten Seite findest du eine kleine Übersicht über dieses Forum.<br /> <br />Sieh dich in Ruhe um.<br /> <br /> Es gibt allerdings einige Bereiche, die erst freigeschalten werden, wenn du ein registriertes Mitglied bist.</span></span><br />  <br />                         
                                                       
<p>
                            <span style="font-size: 18px;"><span style="color: #ffffff;">Falls du Fragen hast, kannst du sie jederzeit live in der Speechbox stellen (Voraussetzung: <span style="color: rgb(204, 153, 0);"><img src="https://i.servimg.com/u/f18/18/65/71/67/crown-18.png" />Admin</span> oder <span style="color: silver"><img src="https://i.servimg.com/u/f18/18/65/71/67/star-613.png" />Moderator</span> sind online). Oder unter dem Bereich Q&A in der Gästelounge.<br /></span>  </span>                         
</p>
  <br />
  <p><span class="closebtn">Los geht's</span></p>
</div>
<script>
  (function ($) {
    'use strict';
 
    $(function () {
 
      var showMsg = localStorage.getItem('showMsg');
 
      if(showMsg !== 'false'){
        $('.fm-alert').show();
      }
 
    $('.closebtn').on('click', function(){
      $('.fm-alert').fadeOut('slow');
      localStorage.setItem('showMsg', 'false');
    });
 
    });
  })(jQuery);
 
</script>

Hallo @pedxz,

super vielen Dank.

Ich werde noch ein wenig an den Farben basteln, aber das, was ich wollte, funktioniert.

Ihr seid die Besten

Ist somit erledigt