Pop Up с кешированием

Всплывающее окно с текстом, html кодом и т.п. делается на jquery. Может применятся везде, где возможна вставка HTML

Вставляем наш текст всплывающего окна

<div id="divModal" class="windowModal">
<div><a href="#closemod" title="Close" class="closemod"> </a>

<h1 style="text-align: center;">Акция</h1>
<p style="text-align: center;">Текст акции</p>
<p style="text-align: center;">описание акции</p>
<p> </p>
<p style="text-align:center;"><a href="#" title="Close" class="btn btn-warning btn-ok">Понятно, больше не показывать</a>   <a href="tel:+799999999" class="btn btn-success">Позвонить менеджеру</a></p>
</div>
</div>
Ниже пишем скрипт показа окна. Суть в следующем: проверяем наличие данных в localStorage - аналог куки, если пусто - показываем окно, иначе скрываем и больше не показываем. Не забудьте подключить Jquery!.
<script type="text/javascript">
jQuery(document).ready(function($) {
$('.closemod, .btn-ok').click(function(){
$('#divModal').removeClass("openw");
localStorage.setItem('myKey', '1');
});
if (localStorage.getItem("myKey")=='1') {
$('#divModal').removeClass("openw");
} else {
$("#divModal").addClass("openw");
}
});
</script>
Стилизуем всплывающее окно, кнопку закрыть
.windowModal{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,0.8);z-index:99999;opacity:0;-webkit-transition:opacity 400ms ease-in;-moz-transition:opacity 400ms ease-in;transition:opacity 400ms ease-in;pointer-events:none}
.windowModal:target,.windowModal.openw{opacity:1;pointer-events:auto}
.windowModal > div{max-width:660px; width: 60%;position:relative;margin:10% auto;padding:40px;background:#fff}
.closemod{background:#e90b0e;color:#fff;line-height:0;position:absolute;right:10px;text-align:center;top:10px;width:32px;height:32px;text-decoration:none}
.closemod:after{content:"\00d7";line-height:1;display:block;font-size:34px}
.closemod:hover{background:#00d9ff}

Заметки фрилансера

Pop Up с кешированием