Показать модально один раз за посещение

Question

Я знаю, что этот вопрос задан много раз раньше, но я не могу найти решение моей «проблемы», чтобы показать мой модальный только один раз за посещение. Я пробовал также много разных (cookie) скриптов, но ничего не работает в сочетании с существующим скриптом. Многие, многие спасибо!

HTML

<div id="MyPopup" class="overlay"> 
    <div class="autopop"> 
    <a class="close" href="#MyPopup">&times;</a> 
    <div class="a-content"> 
     Some content goes here. 
    </div> 
    </div> 
</div> 

CSS

.overlay::before, 
.overlay .autopop { 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    position: fixed; 
} 
.overlay::before { 
    content: ""; 
    background: rgba(0, 0, 0, .8); 
    display: block; 
    z-index: 99990 
} 
.overlay .autopop { 
    width: 30%; 
    height: 70%; 
    margin: auto; 
    font: 18px/1.5em Open Sans; 
    background: #ff9933; 
    border-radius: 5px; 
    box-shadow: 0 10px 15px 0 #000; 
    z-index: 99999; 
    transition: all 3s ease-in-out; 
} 
.overlay:target::before { 
    display: none; 
} 
.overlay:target .autopop { 
    top: -200%; 
    right: -200%; 
    transform: rotate(90deg); 
} 
.autopop .a-content { 
    height: 100%; 
    overflow: auto; 
    padding: 0 10px; 
} 
.autopop .close { 
    top: 0; 
    right: 15px; 
    font: 800 30px Open Sans; 
    color: #fff !important; 
    transition: all 0.2s; 
    position: absolute; 
} 

Jquery (начать всплывающее окно с задержкой}

$(document).ready(function(){ 
    $("#MyPopup").hide(0).delay(7000).fadeIn(0)} 
); 

Answer 1

Полный ответ для варианта cookie является:

1. После показывает всплывающее окно, добавьте cookie в браузер.
2. В каждый момент времени проверьте, есть ли в браузере cookie.

Вы не можете видеть результат здесь из-Technic причине (Функция Iframe предварительного просмотра выставиться в качестве SANbox фрейма), так что вы можете увидеть его here.

Примечание: для поддержки кросс-браузера лучше использовать cookie вместо localStorage.

function setCookie(cname, cvalue, exdays) { 
 
    var d = new Date(); 
 
    d.setTime(d.getTime() + (exdays*24*60*60*1000)); 
 
    var expires = "expires="+d.toUTCString(); 
 
    document.cookie = cname + "=" + cvalue + "; " + expires; 
 
} 
 

 
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 ""; 
 
} 
 

 
var cookie = getCookie('shown'); 
 
if (!cookie) { 
 
    showPopup(); 
 
} 
 

 
function showPopup() { 
 
    setCookie('shown', 'true', 365); 
 
    document.querySelector('#MyPopup').style.display = 'block'; 
 
}

#MyPopup { 
 
    display:none; 
 
}

<div id="MyPopup" class="overlay"> 
 
    <div class="autopop"> 
 
    <a class="close" href="#MyPopup">&times;</a> 
 
    <div class="a-content"> 
 
     Some content goes here. 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

Почему бы вам не использовать localstorage?

Пример кода :

if (localStorage.getItem('IsModalShown').toString() != 'true') 
{ 
    showModal(); 
    localStorage.setItem('IsModalShown',true); 
}