jQuery модальное окно предупреждения с cookie

В статье рассмотрим как сделать jQuery модальное PopUp окно предупреждения при первом запуске сайта с использованием cookie для хранения переменной, по которой можно определить заходил ли ранее пользователь на сайт и какой выбор он сделал. Логика всплывающего окна следующая: при первом запуске сайта выпадает PopUp окно с условием, например, спросим у пользователя — исполнилось ли ему 18 лет.

Если он просто закроет сайт и откроет снова — окно все равно будет выпадать, пока он не сделает выбор. Если он выберет «НЕТ» — будет всплывать запись, что для просмотра сайта нужно согласие или нужно покинуть сайт.

Таким образом окно будет все время выпадать и не давать делать никакие действия с сайтом, пока пользователь не согласится. Если пользователь нажмет «ДА», тем самым дав согласие, что ему есть 18 лет, окно больше не будет выпадать определенное количество дней, которое мы укажем в скрипте.

Код html модального окна:

<div id="warning-win">
	<div class="cover-warning"></div>
	<div class="win-warning-content container-modal-warning">
		<h2>Вопрос?</h2>
		<button id="b_yes">Да</button>
		<button id="b_no">Нет</button>
		<p class="text-warning" style="visibility: hidden;">Нужно подтвердить</p>
	</div>
</div>

Код стилей css:

.win-warning-content {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    text-align: center;
    overflow-x: auto;
    overflow-y: scroll;
    padding: 20px;
    z-index: 200;
}
.cover-warning {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.6;
    z-index: 100;
}
.container-modal-warning {
    max-width: 400px;
    margin: 200px auto;
    padding: 40px;
    background: #fff;
    max-height: 300px;
    overflow: hidden;
}
#b_yes, #b_no {
    padding: 10px 20px;
}
#b_yes {
    background: #00db09;
    color:#fff;
}
#b_no {
    background: #ff1f04;
    color:#fff;
}
.text-warning {
    margin-top:20px;
    color:red;
}
@media (max-height: 860px) {
    .container-modal-warning {
        max-width: 100%;
        margin: 100px 20px;
        padding: 19px;
        height: auto;
        min-height: 320px;
        background: #fff;
        overflow: hidden;
    }

}

код jQuery скрипта:

в параметре expires указываем количество дней для хранения переменной в cookie

jQuery(function () {
	
	var wrap3 = $('#warning-win'),
	modal3 = $('.cover-warning, .win-warning-content');
	if (!$.cookie('was') ) {
		modal3.fadeIn();
	}
$('#b_yes').click(function () {
	$.cookie('was', true, {
		expires: 365,
		path: '/'
	});
	$(modal3).fadeOut();
});
$('#b_no').click(function () {
	$('.text-warning').css("visibility", "visible").fadeIn(2200);
	$.removeCookie('was');
});

});

Подключение jQuery и библиотеки cookie

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="//yandex.st/jquery/cookie/1.0/jquery.cookie.min.js"></script>