Модальное окно через 10 секунд
Модальное окно всплывающе через 10 секунд автоматически.
Стандартное модальное окно - смотреть
HTML:
<div id="modal-content">
<p>Текст</p>
<a id="modal-close" href="#close">Закрыть</a>
</div>
CSS:
#modal-content {
display: none;
position: fixed;
z-index: 9999999;
background: #FFF;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
max-width: 700px;
width: 100%;
text-align: center;
padding: 10px 20px;
border: 4px solid #337AB7;
box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
}
#modal-close {
display: inline-block;
margin: 10px 6px 4px 6px;
text-decoration: none;
position: relative;
font-size: 16px;
padding: 8px 16px;
color: #FFF;
font-weight: bold;
text-transform: uppercase;
background: #337AB7;
}
#modal-close:hover {
color: #FFF;
}
#modal-close:after,
#modal-close:before {
position: absolute;
height: 2px;
left: 50%;
background: #337AB7;
bottom: -6px;
content: "";
transition: all 280ms ease-in-out;
width: 0;
}
#modal-close:before {
top: -6px;
}
#modal-close:hover:after,
#modal-close:hover:before {
width: 100%;
left: 0;
}
JS:
setTimeout(function(){
modalwin = document.getElementById('modal-content');
modalwin.style.display="block";
document.getElementById("modal-close").addEventListener("click", function(){
modalwin.style.display="none";
});
}, 10000);
Или показать однократно через cookie:
function getCookie(name) {
let matches = document.cookie.match(new RegExp(
"(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
));
return matches ? decodeURIComponent(matches[1]) : undefined;
}
let mcookie = getCookie("mcookie");
if (mcookie != "no") {
setTimeout(function(){
modalwin = document.getElementById('modal-content');
modalwin.style.display="block";
document.getElementById("modal-close").addEventListener("click", function(){
modalwin.style.display="none";
// записываем cookie на 1 день, с которой мы не показываем окно
let date = new Date;
date.setDate(date.getDate() + 1);
document.cookie = "mcookie=no; path=/; expires=" + date.toUTCString();
});
}, 10000);
}