Wsrtjtyk

function getBaseUrl(){return window.location.protocol+"//"+window.location.host}function getTemplate(e){var n=getBaseUrl()+handlebarTemplatesPath+e+".hbs";return jQuery.get(n).then(function(e){return Handlebars.compile(e)})}var handlebarTemplatesPath="/templates/components/common/";addAgeVerifyToBody=function(){getTemplate("age-verify").done(function(e){jQuery("body").append(e)})},jQuery(document).ready(function(){"true"!=Cookies.get("age-verified")&&addAgeVerifyToBody()}),overAge=function(){jQuery("#age-verify").addClass("hidden"),Cookies.set("age-verified","true")},underAge=function(){jQuery("#age-verify").addClass("under")},goBack=function(){window.history.back()};    

#age-verify {

  position: fixed;

  z-index: 9997;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background-color: rgba(0, 0, 0, 0.8);

  transition: 500ms;

}

#age-verify .window {

  position: absolute;

  z-index: 9998;

  top: 50%;

  left: 50%;

  width: 400px;

  height: 250px;

  overflow: hidden;

  padding: 40px;

  margin-left: -200px;

  margin-top: -125px;

  background-color: #fff;

  border: 6px solid Red;

  box-sizing: border-box;

  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);

  transition: 500ms;

}

#age-verify .window span {

  display: block;

  text-align: center;

  margin-bottom: 10px;

  font-family: "Open Sans", sans-serif;

  font-size: 17px;

}

#age-verify .window span.title {

  color: Red;

  font-size: 24px;

}

#age-verify .window button {

  border: 0;

  margin: 0;

  padding: 0;

  width: 48%;

  height: 60px;

  color: #FFF;

  font-size: 18px;

  background-color: Red;

  margin-top: 20px;

  font-family: "Open Sans", sans-serif;

  transform: scale(1);

  transition: .2s;

}

#age-verify .window button.back {

  display: block;

  float: none;

  margin: auto;

  background-color: #fff;

  color: Red !important;

  margin-top: 20px;

}

#age-verify .window button.yes {

  float: left;

}

#age-verify .window button.no {

  float: right;

}

#age-verify .window button:hover {

  transform: scale(1.1);

  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);

  background-color: #ff3333;

}

#age-verify .window .underBox {

  position: absolute;

  width: 400px;

  height: 250px;

  padding: 40px;

  top: 100%;

  left: 0;

  right: 0;

  background-color: Red;

  transition: 500ms;

  box-sizing: border-box;

}

#age-verify .window .underBox * {

  color: #FFF !important;

}

#age-verify.hidden {

  opacity: 0;

  visibility: hidden;

}

#age-verify.hidden .window {

  transform: scale(0.5);

}

#age-verify.under .window .underBox {

  top: 0%;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.12/handlebars.min.js"></script>

<div id="age-verify">

  <div class="window">

    <span class="title">Are you over 21?</span>

    <span>To visit our website, you must be of legal drinking age.</span>

    <button class="yes" onclick="overAge()">Yes</button>

    <button class="no" onclick="underAge()">No</button>

    <div class="underBox">

      <span class="title">Sorry!</span>

      <span>You need to be at least 21 to visit our website.</span>

      <button class="back" onclick="goBack()">Go Back</button>

    </div>

  </div>

</div>

    $(document).ready(function(){



        window.onload = function() {

           checkCookie();

        };



        function getCookie(cname) {

            var name = cname + "=";

            var decodedCookie = decodeURIComponent(document.cookie);

            var ca = decodedCookie.split(';');

            for(var i = 0; i < ca.length; i++) {

                var c = ca[i];

                while (c.charAt(0) == ' ') {

                    c = c.substring(1);

                }

                if (c.indexOf(name) == 0) {

                    return c.substring(name.length, c.length);

                }

            }

            return "";

        }

        function checkCookie() {

            var user=getCookie("age-verified");

            if (user != "") {

                $("#age-verify").addClass("hidden");

            }

        }

        



        var yesEl = document.getElementById('yes');

        var noEl = document.getElementById('no');



        yesEl.addEventListener('click', function(){

            //document.cookie = 'age-verified; expires=1';

            $('#age-verify').addClass('hidden');

            function setCookie(cname,cvalue,exdays) {

                var d = new Date();

                d.setTime(d.getTime() + (exdays*1));

                var expires = "expires=" + d.toGMTString();

                document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";

            }

        });



        noEl.addEventListener('click', function() {

            $('#age-text').addClass('hiddenText');

            $('#under-age').removeClass('hiddenText');

            $('#yes').addClass('hiddenText');

        });



    });

    

#age-verify {

  position: fixed;

  z-index: 9997;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background-color: rgba(0, 0, 0, 0.8);

}

#age-verify .window {

  position: absolute;

  z-index: 9998;

  top: 50%;

  left: 50%;

  width: 400px;

  height: 250px;

  overflow: hidden;

  padding: 40px;

  margin-left: -200px;

  margin-top: -125px;

  background-color: #fff;

  border: 6px solid Red;

  box-sizing: border-box;

  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);

}

#age-verify .window span {

  display: block;

  text-align: center;

  margin-bottom: 10px;

  font-family: "Open Sans", sans-serif;

  font-size: 17px;

}

#age-verify .window span.title {

  color: Red;

  font-size: 24px;

}

#age-verify .window button {

  border: 0;

  margin: 0;

  padding: 0;

  width: 48%;

  height: 60px;

  color: #FFF;

  font-size: 18px;

  background-color: Red;

  margin-top: 20px;

  font-family: "Open Sans", sans-serif;

  transform: scale(1);

}

#age-verify .window button.back {

  display: block;

  float: none;

  margin: auto;

  background-color: #fff;

  color: Red !important;

  margin-top: 20px;

}

#age-verify .window button.yes {

  float: left;

}

#age-verify .window button.no {

  float: right;

}

#age-verify .window button:hover {

  transform: scale(1.1);

  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);

  background-color: #ff3333;

}

#age-verify .window .underBox {

  position: absolute;

  width: 400px;

  height: 250px;

  padding: 40px;

  top: 100%;

  left: 0;

  right: 0;

  background-color: Red;

  transition: 500ms;

  box-sizing: border-box;

}

#age-verify .window .underBox * {

  color: #FFF !important;

}

#age-verify.hidden {

  opacity: 0;

  visibility: hidden;

}

#age-verify.hidden .window {

  transform: scale(0.5);

}

#age-verify.under .window .underBox {

  top: 0%;

}

.hiddenText {

  display: none;

}   

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js" type="text/javascript"></script>

<div id="age-verify">

  <div class="window">

    <div id="age-text">

      <span class="title">Are you over 21?</span>

      <span>You must be 21 to visit this website.</span>

    </div>

    <div id="under-age" class="hiddenText">

      <span class="title">Sorry!</span>

      <span>You need to be at least 21 to visit our website.</span>

    </div>

    <button id="yes" class="yes">Yes</button>

    <button id="no" class="no">No</button>

  </div>

</div>