dynamicweb/templates/gdpr/gdpr_banner.html

{% load i18n %}
{% if request.COOKIES.gdpr_accepted or IS_TENANT_SITE %}
{% else %}
<style>
div#gdprBanner {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 10px;
    background-color: #29427A;
    z-index: 999;
    color: #ffffff;
}
#gdprBanner a {
    cursor: pointer;
    color: #ffffff;
    font-weight: 600;
}
#gdprBanner button {
    margin-left: 25px;
}
</style>
<div class="gdprBanner text-center" id="gdprBanner">This site uses cookies for analytics. By continuing to browse this site, you agree to use this. <a data-toggle="modal" data-target="#gdprModal">Learn more</a>  <button onclick="cookieManager.createGDPRCookie();" type="button" class="btn btn-info" data-dismiss="modal">Accept</button></div>
<div class="modal fade" id="gdprModal" role="dialog">
<div class="modal-dialog">

  <!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">&times;</button>
      <h4 class="modal-title">Modal Header</h4>
    </div>
    <div class="modal-body">
      <p>Some text in the modal.</p>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
  </div>

</div>
</div>

<script type="text/javascript">
var cookieManager = {

    createCookie: function (name, value, days) {
        var date = new Date(),
            expires = '';
        if (days) {
            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
            expires = "; expires=" + date.toGMTString();
        } else {
            expires = "";
        }
        document.cookie = name + "=" + value + expires + "; path=/";
    },

    createGDPRCookie: function () {
        this.createCookie('gdpr_accepted', '1', 10 * 365);

        if (typeof (window.jQuery) === 'function') {
            jQuery('#gdprBanner').slideUp();
        } else {
            document.getElementById('gdprBanner').style.display = 'none';
        }
    }

};
</script>
{% endif %}