<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);
    });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js