[FEATURE] Add close button

Author: pixelbrackets

cookie-consent.css

@@ -52,6 +52,25 @@
   color: #1b1e21;
 }
 
+.cookie-consent .close {
+  font-size: 1.8em;
+  color: #d6d8d9;
+  text-decoration: none;
+  background: #222;
+  border: none;
+  cursor: pointer;
+  margin: 0 0 0 40px;
+  float: right;
+}
+
+.cookie-consent .close:hover {
+  color: #fff;
+}
+
+.hidden {
+  display: none;
+}
+
 @media (max-width: 480px) {
   .hidden-xs {
     display: none;

demo.html

@@ -11,7 +11,8 @@
 
   <!-- Consent Bar - Example setting level 20 for 8 hours upon continued usage, and level 80 for 1 year if the user clicks the button -->
   <div class="cookie-consent" data-level="20" data-duration="8">
-    <p>We use cookies on this website. <span class="hidden-xs">Cookies are small text files, stored on your computer. We use cookies to provide statistics that help us give you the best experience of our site. By continuing to use the site without changing settings, you are agreeing to our use of cookies.</span>
+    <p>We use cookies on this website. <span class="hidden-xs">Cookies are small text files, stored on your computer. We use cookies to provide statistics that help us give you the best experience of our site.</span>
+      By continuing to use the site without changing settings, you are agreeing to our use of cookies.
       <a href="#">Read Privacy Notice</a></p>
 
     <button type="button" class="btn btn-primary cookie-accept" data-level="80" data-duration="8760">OK</button>
@@ -20,6 +21,8 @@
   <!-- Consent Bar - Best practice example allowing only necessary cookies by default and let users opt in to different consent levels -->
   <!--
   <div class="cookie-consent">
+    <button type="button" class="close cookie-accept" data-level="0" data-duration="8">&times;<span class="hidden">Dismiss</span></button>
+
     <p>We use cookies on this website. <span class="hidden-xs">Cookies are small text files, stored on your computer. We use cookies to provide statistics that help us give you the best experience of our site.</span>
       <a href="#">Read Privacy Notice</a></p>
 
@@ -38,16 +41,6 @@
   </div>
   -->
 
-  <!-- Consent Bar - Example translated into german -->
-  <!--
-  <div class="cookie-consent">
-    <p>Wir verwenden Cookies auf dieser Website. <span class="hidden-xs">Cookies sind kleine Textdateien, die auf Ihrem Computer gespeichert werden. Sie dienen dazu, unsere Seiten nutzerfreundlicher zu machen und diese optimiert darzustellen.</span>
-      <a href="#">Zur Datenschutzerklärung</a></p>
-
-    <button type="button" class="btn btn-primary cookie-accept">Alle Cookies erlauben</button>
-  </div>
-  -->
-
   <!-- You may set up your own additional buttons anywhere to change the consent level as needed -->
   <!--
   <button type="button" class="btn btn-secondary" onClick="$.cookie('cookie-consent', 0, 720); return false;">Opt-Out</button>