Javascript-форум - Проверка количества открытий модального окна.

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Проверка количества открытий модального окна. (https://javascript.ru/forum/misc/69110-proverka-kolichestva-otkrytijj-modalnogo-okna.html)

Проверка количества открытий модального окна.

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

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

});

как решить такую проблему?

Цитата:

Сообщение от serenevenkiy

Я реализовал это с помощью localStorage и все работает

:blink:

localStorage счётчик открытий окна

serenevenkiy,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/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;
}
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  <script>
$(function() {
    var a = +localStorage.xxx || 0;
    3 > a && (localStorage.xxx = ++a, $("#bg_popup").show().on("click", function(a) {
        ($(a.target).closest(".close").length || a.target == this) && $("#bg_popup").hide()
    }))
});
  </script>
</head>

<body>

  <div id="bg_popup">
  <div id="popup">
    <a  id="setCookie" class="close" href="#" title="Close" onclick="">
      <i class="fa fa-times" aria-hidden="true">X</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>
  </div>

</body>
</html>