При первых трех запусках страницы сайта должно всплывать модальное окно с краткой информацией о Вас. Всплывающее окно должно закрываться по клику на крестик или же по клику вне модального окна;
Я реализовал это с помощью localStorage и все работает, но такой подход не является корректным
само модальное окно:
<div id="bg_popup" onclick=""></div>
<div id="popup">
<a id="setCookie" class="close" href="#" title="Close" onclick="">
<i class="fa fa-times" aria-hidden="true"></i>
</a>
<h2>Hello!</h2>
<p>Hello, my name is Nik.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo eos architecto maiores ut dolorem esse voluptate saepe doloribus facere eligendi velit rerum, harum, tempora voluptatibus sed natus voluptatem quos iusto.
</p>
</div>
CSS код:
|
Код:
|
#bg_popup{
background: rgba(0, 0, 0, 0.7);
bottom: 0;
display: none;
left: 0;
position: fixed;
right: 0;
top: 0;
z-index: 99;
}
#popup h2{
margin-bottom: 25px;
text-align: center;
}
#popup {
background:#fff;
border-radius: 10px;
left: 0;
margin-left: auto;
margin-right: auto;
padding: 25px 25px 60px 25px;
position: absolute;
right: 0;
top: 25%;
width: 575px;
z-index: 101;
}
.close {
color: #222;
cursor:pointer;
display:block;
height:20px;
position:absolute;
right:5px;
top:5px;
width:20px;
} |
и сам код js:
$(document).ready(function(){
// localStorage.clear();
if (localStorage.length < 3){
localStorage.setItem(localStorage.length+1,localStorage.length+1);
$("#setCookie").click(function () {
var date = new Date();
date.setTime(date.getTime() + (60 * 1));
$.cookie("popup", "", {expires: date} );
$("#bg_popup").hide();
});
if ( $.cookie("popup") == null ){
setTimeout(function(){
$("#bg_popup").show();
}, 0)
}else {
$("#bg_popup").hide();
}
$('#bg_popup').click(function () {
$(this).hide();
$('#popup').hide();
});
$(' .close').click(function (e) {
e.preventDefault();
$('#bg_popup, #popup').hide();
});
}else{
$('#bg_popup, #popup').hide();
}
});
как решить такую проблему?
