jQuery modal cookie warning window

0
655

In the article, we will look at how to make the jQuery modal PopUp warning window when you first start the site using a cookie to store a variable, by which you can determine whether the user has previously visited the site and what choice he made. The logic of the pop-up window is as follows: when the site is first launched, a PopUp window pops up with a condition, for example, we ask the user if he is 18 years old.

 

 

If he just closes the site and opens it again, the window will still drop out until he makes a choice. If he selects “NO” – a record will pop up that you need consent to view the site or you need to leave the site.

Thus, the window will drop out all the time and prevent it from doing any actions with the site until the user agrees. If the user clicks “YES”, thereby agreeing that he is 18 years old, the window will no longer drop a certain number of days, which we indicate in the script.

 

Html code modal (popup) window:

<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>

Code of 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;
    }

}

code jQuery script:

The expires parameter specify the number of days to store the variable in the 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');
});

});

Connect jQuery and cookie library

<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>

 

LEAVE A REPLY

Please enter your comment!
Please enter your name here