It is important to display cookie disclaimer message if you are using cookie for your website as per Cookie Law. The Cookie Law is a piece of privacy legislation that requires websites to get consent from visitors to store or retrieve any information on a computer, smartphone or tablet.It was designed to protect online privacy, by making visitor to aware of how information about them is collected and used online, and give them a choice to allow it or not. So i found a simple jquery plugin (JQuery-Cookies-Message) to display responsive jquery cookie disclaimer bar according.
JQuery-Cookies-Message Features:
* Easy to implement
* Customizable colors and text
* Multiple button combinations and customizable links style
* Custom cookie expire time to remember the user’s choice
* Responsive design for desktop and mobile devices
Integration of responsive jquery cookie disclaimer bar
Include the JQuery library and the Cookies Message Plugin (JS+CSS) on page.
<link href="cookies-message.min.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.2.1.min.js" crossorigin="anonymous" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=">script> <script src="cookies-message.min.js">script> |
All done Initialize cookies-message plugin on page.
<script> $(function() { $.CookiesMessage(); }); script> |
You can also customize the message bar by using following options.
<script> $(function() { $.CookiesMessage({ messageText: "We use technical and analytics cookies to ensure that we give you the best experience on our website.", messageBg: "#151515", // Message box background color messageColor: "#FFFFFF", // Message box text color messageLinkColor: "#F0FFAA", // Message box links color closeEnable: true, // Show the close icon closeColor: "#444444", // Close icon color closeBgColor: "#000000", // Close icon background color acceptEnable: true, // Show the Accept button acceptText: "Accept & Close", // Accept button text infoEnable: true, // Show the More Info button infoText: "More Info", // More Info button text infoUrl: "#", // More Info button URL cookieExpire: 180 // Cookie expire time (days) }); }); script> |
See live demo and download source code.
See official github repository for more information..
Video Demo – Responsive jquery cookie disclaimer bar