Cookies Popup in Browser using HTML CSS and JavaScript Browser Cookie Popup Set JavaScript

Creative Javascript | June 27, 2021

Video tutorial of Cookies Popup in Browser using HTML CSS and JavaScript Browser Cookie Popup Set JavaScript

This tutorial video can help you to create Cookies Popup in Browser using HTML CSS and JavaScript Browser Cookie Popup Set JavaScript

You might like this

Cookies Popup in Browser using HTML CSS and JavaScript Browser Cookie Popup Set JavaScript[Source Codes]

This source code can help you to create Cookies Popup in Browser using HTML CSS and JavaScript Browser Cookie Popup Set JavaScript

You can also download this source code through the given link. Click here to download source code

HTML Code

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<!-- cookies start -->

<div class="cookie_box" id="cookie_box">
	<img src="images/cookie.png">
	<h3>Cookie Policy</h3>
	<p>This site can store cookies on your website and disclose information in accrdance with our cookie policy <a href="#">Learn more</a></p>
	<button id="activeBtn">Accept</button>
</div>

<!-- cookies end -->

<header class="header">
	<div class="container">
		<a href="#" class="logo">LOGO</a>
		<nav class="main_nav">
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">About Us</a></li>
				<li><a href="#">Services</a></li>
				<li><a href="#">Portfolio</a></li>
				<li><a href="#">Contact Us</a></li>
			</ul>
		</nav>
	</div>
</header>



<script type="text/javascript" src="js/custom.js"></script>
</body>
</html>

CSS Code

Copy

*,*:after,*:before{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
body{
	font-family: arial;
	font-size: 16px;
	margin: 0;
	line-height: 1.4;
	background: #bdedff;
	color: #000;
}

.header{
	padding:30px 0;
	position: fixed;
	left: 0;
	width: 100%;
	z-index: 10;
	transition: all 0.1s ease-in-out;
	background: #024E73;
}
.container{
	max-width: 1200px;
	margin:0 auto;
	padding:0 15px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.logo{
	font-size: 40px;
	color: #fff;
	text-decoration: none;
	font-weight: 700;
}
.main_nav ul{
	padding: 0;
	margin:0;
	list-style: none;
}
.main_nav ul li{
	display: inline-block;
	margin-left: 25px;
	font-family: "Montserrat",sans-serif;
}
.main_nav ul li a{
	text-decoration: none;
	color: #fff;
	font-size: 18px;
	transition: all 0.3s linear;
}
.main_nav ul li:hover a{
	color:#f00 
}

/*Cookies
---------------------------------------------*/
.cookie_box{
	position: fixed;
	left: 0;
	bottom: 0;
	width: 400px;
	padding: 20px;
	background:#fff;
	text-align: center;
	box-shadow: 0 0 15px rgba(0,0,0,0.3);
}
.hide{
	display: none;
}
.cookie_box img{
	width: 70px;
	display: inline-block;
	vertical-align: middle;
	margin-right: 30px;
}
.cookie_box h3{
	display: inline-block;
	vertical-align: middle;
	margin:0;
	font-size: 30px;
}
.cookie_box button{
	padding: 8px 25px;
	background:#027cb7;
	color: #fff;
	font-size: 18px;
	border:0;
	outline: 0;
	cursor: pointer;
}
.cookie_box button:focus{
	background:#054d6f;
}

JavaScript Code

Copy

var cookie_box = document.getElementById('cookie_box'),
activeBtn = document.getElementById('activeBtn');

activeBtn.addEventListener('click',function(){
	//UTC is time set by the world time standard
	document.cookie = "CookieBy=InventionTricks; expires=" + new Date(2022,0,1).toUTCString();
	//This cookies expires after 30 days
	document.cookie = "Name=John; max-age=" + 60*60*24*30;
	document.cookie = "LastName=deo; max-age=" + 60*60*24*30;
	
	if(document.cookie){
		//Hide the popup box
		cookie_box.classList.add('hide');
	}else{
		//If we block cookie setting then show this massege
		alert("cookie not set! Please allow this site from your browser cookie setting");
	}

})

function getCookieName(name) {
    var r = document.cookie.match("\\b" + name + "=([^;]*)\\b");
    return r ? r[1] : '';
}
var getCookieName = getCookieName('CookieBy');
//alert(getCookieName)
if(getCookieName === 'InventionTricks'){
	//All time hide the popup box
	cookie_box.classList.add('hide');
}