Показать сообщение отдельно
  #1 (permalink)  
Старый 30.05.2017, 13:44
Новичок на форуме
Отправить личное сообщение для serenevenkiy Посмотреть профиль Найти все сообщения от serenevenkiy
 
Регистрация: 18.05.2017
Сообщений: 3

Проверка количества открытий модального окна.
При первых трех запусках страницы сайта должно всплывать модальное окно с краткой информацией о Вас. Всплывающее окно должно закрываться по клику на крестик или же по клику вне модального окна;

Я реализовал это с помощью 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();
    }

});


как решить такую проблему?
Ответить с цитированием