Всплывающее окно с предупреждением, что материалы запрещены для лиц до 18 лет
Код:
<html>
<head>
<meta charset="utf-8">
<style>
#bg_popup {
background: #000;
height: 100%;
opacity: 0.9;
position: fixed;
width: 100%;
z-index: 100;
top: 0;
left: 0;
}
#popup {
background-color: #fff;
height: 200px;
position: fixed;
color: #f00;
width: 300px;
padding: 2px;
}
</style>
</head>
<body>
<div id="bg_popup">
<div id="popup">
<p style="text-align: right;"><a class="close" href="/" title="Закрыть">Закрыть</a></p>
<h1><p style="text-align: center;">ВНИМАНИЕ!</p></h1>
<p style="text-align: justify;">Данный сайт может содержать материалы для людей старше 18 лет.<br>Чтобы продолжить, подтвердите, что вам уже исполнилось 18 лет.</p>
<p style="text-align: center;">
<a id="setCookie" href="#">Да, мне есть 18 лет</a>
<a href="/">Нет, мне нет 18 лет</a>
</p>
</div>
</div>
<script>
$(function(){
$('#setCookie').click(function(){
$.cookie('popup', '1', {expires: 30});
$('#bg_popup').hide();
});
$('#bg_popup').hide();
if(!$.cookie('popup')){
setTimeout(function(){ $('#bg_popup').show(); }, 2000)
}
});
$(function() {
alignCenter($('#popup')); // центрировали окно
$(window).resize(function() {
alignCenter($('#popup')); // центрирование при ресайзе окна
})
// функция центрирования
function alignCenter(elem) {
elem.css({
left: ($(window).width() - elem.width()) / 2 + 'px', // получаем координату центра по ширине
top: ($(window).height() - elem.height()) / 2 + 'px' // получаем координату центра по высоте
})
}
})
</script>
</body>
</html>