<div class="cookie-bar">
<div class="container">
<div class="cookie-bar-inner">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt tempore modi repellendus maiores nulla cum veniam repudiandae dolorem optio debitis, provident, soluta inventore similique. Dicta nam incidunt deleniti, consectetur porro!</p>
<a href="javascript:void(0);" class="border-btn" id="cookie-button">I Agree</a>
</div>
</div>
</div>
<div>
<p>If you click on I Agree button than cookie will set for 1 month.</p>
<p>If you want to see cookie message again than open this codepen in private window.</p>
</div>
.cookie-bar {
position: fixed;
bottom: 0;
opacity: 0;
left: 0;
right: 0;
z-index: 999;
background: #18bc9c;
padding: 1.5rem 0;
}
.cookie-bar .container {
max-width: 1465px;
padding: 0 25px;
margin: 0 auto;
}
.cookie-bar .cookie-bar-inner {
display: flex;
justify-content: center;
align-items: center;
}
.cookie-bar .cookie-bar-inner p {
color: #fff;
font-size: 1.5rem;
line-height: 1.4;
padding: 0 45px 0 0;
margin: 0;
}
.border-btn {
min-width: 12.1rem;
background-color: transparent;
border: 1px solid #fff;
padding: 1rem 2.2rem;
font-size: 1.5rem;
line-height: 1.16;
text-transform: capitalize;
font-family: Open Sans,sans-serif;
font-weight: 600;
color: #fff;
display: inline-block;
text-align: center;
box-sizing: border-box;
height: 4.1rem;
position: relative;
z-index: 1;
overflow: hidden;
}
.border-btn:hover {
border-color: #fa8503;
background-color: #fa8503;
}
a, a:active, a:hover, a:link, a:visited {
outline: none;
text-decoration: none;
transition: all .3s;
-o-transition: all .3s;
-ms-transition: all .3s;
-webkit-transition: all .3s;
-moz-transition: all .3s;
}
p{
font-size:20px;
text-align:center;
}
jQuery(".cookie-bar").css("opacity","1");
var now = new Date();
var time = now.getTime();
var expireTime = time + 30*24*60*60*1000;
now.setTime(expireTime);
if (document.cookie.indexOf("ModalShown=true") < 0) {
jQuery("#cookie-button").click(function () {
document.cookie = "ModalShown=true; expires="+now.toGMTString()+";path=/";
});
}
else {
jQuery(".cookie-bar").remove();
}
// cookie hide show
$('.cookie-bar .cookie-bar-inner #cookie-button').click(function(){
var _this = jQuery(this);
jQuery(this).closest(".cookie-bar").slideUp();
var headerHeight = jQuery('header').innerHeight();
setTimeout(function(){
_this.closest(".cookie-bar").remove();
},300);
});
This Pen doesn't use any external CSS resources.