25. Juli 2023

jQuery-Info-Pop-up

Pop-ups nerven. Meistens. Manchmal gibt es aber eben doch eine wichtige Info, die prominent kommuniziert werden muss. Z.B. geänderte Öffnungszeiten, eine aktuelle Stellenausschreibung o.ä. … Für diesen Fall eignet sich folgendes Snippet ganz hervorragend.

Wenn auf das „x“ geklickt wird, wird das Pop-up erst wieder am nächsten Tag angezeigt.

<div class="infobox" style="background: #fff; color:#666; padding: 30px; box-shadow:0 0 5px rgba(0,0,0,0.3); position:fixed; bottom:-2000px; left:20px; right:20px; z-index:50000; transition:1s;">

    <h2>Wichtige Info</h2>

    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    <p><a href="https://www.fbnfrtg.de/" style="font-weight:bold;">mehr Infos</a></p>

    <div style="position: absolute; right:25px; top:25px;" class="closex"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18" ></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></div>

</div>

<script>
jQuery(document).ready(function($) {
    
    var today = new Date();
    var datetoday = today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate();
    var saveddate = localStorage.getItem('infobox');

    if (saveddate != datetoday) {
        window.setTimeout("$('.infobox').css('bottom', '20px');", 3000); 
    }

    $('.closex').click(function() {
        $('.infobox').css('bottom', '-2000px');
        localStorage.setItem('infobox', datetoday);
    });
});         
</script>Code-Sprache: HTML, XML (xml)