{"id":4687,"date":"2021-08-05T18:23:50","date_gmt":"2021-08-05T18:23:50","guid":{"rendered":"https:\/\/www.codexworld.com\/?p=4687"},"modified":"2021-08-05T18:34:01","modified_gmt":"2021-08-05T18:34:01","slug":"cookie-consent-popup-with-javascript","status":"publish","type":"post","link":"https:\/\/www.codexworld.com\/cookie-consent-popup-with-javascript\/","title":{"rendered":"Cookie Consent Popup with JavaScript"},"content":{"rendered":"<p>Nowadays, almost all websites are using cookies to collect various types of information. If your website uses cookies, the visitors must be aware of the cookie policy. In this case, a Cookie Consent Popup can be displayed to ask visitors to accept cookies. That way, the user will be aware of the website&#8217;s cookie uses and accept the cookie policy.<\/p>\n<p><b>Cookie Consent Popup<\/b> is very useful to make websites comply with GDPR. The Cookie Consent Notice can be displayed in a popup box to make it user-friendly. There are various JavaScript or jQuery plugins are available to add the Cookie Notice popup on the website. But, you don&#8217;t need to use any third-party plugin for the cookie consent popup. The cookie consent dialog box can create\/display easily with JavaScript and CSS. This tutorial will show you how to create\/display\/add Cookie Consent Popup on the website using JavaScript.<\/p>\n<h2>Create Popup with HTML<\/h2>\n<p>Define HTML elements to build popup dialog.<\/p>\n<ul class=\"bullet_disk_list\">\n<li>The <b>Accept<\/b> button triggers the <code>acceptCookieConsent()<\/code> which will be defined in the JavaScript section.<\/li>\n<\/ul>\n<pre style=\"color: rgb(95, 94, 78);\"><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"cookieNotice\"<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"light display-right\"<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"display: none;\"<\/span>&gt;<\/span>\r\n    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span> <span class=\"hljs-attr\">id<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"closeIcon\"<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"display: none;\"<\/span>&gt;<\/span>\r\n    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span>&gt;<\/span>\r\n    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"title-wrap\"<\/span>&gt;<\/span>\r\n        <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">h4<\/span>&gt;<\/span>Cookie Consent<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">h4<\/span>&gt;<\/span>\r\n    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span>&gt;<\/span>\r\n    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"content-wrap\"<\/span>&gt;<\/span>\r\n        <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"msg-wrap\"<\/span>&gt;<\/span>\r\n            <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">p<\/span>&gt;<\/span>This website uses cookies or similar technologies, to enhance your browsing experience and provide personalized recommendations. By continuing to use our website, you agree to our  <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">a<\/span> <span class=\"hljs-attr\">style<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"color:#115cfa;\"<\/span> <span class=\"hljs-attr\">href<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"\/privacy-policy\"<\/span>&gt;<\/span>Privacy Policy<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">a<\/span>&gt;<\/span><span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">p<\/span>&gt;<\/span>\r\n            <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"btn-wrap\"<\/span>&gt;<\/span>\r\n                <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">button<\/span> <span class=\"hljs-attr\">class<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"btn-primary\"<\/span> <span class=\"hljs-attr\">onclick<\/span>=<span class=\"hljs-string\" style=\"color: rgb(125, 151, 38);\">\"acceptCookieConsent();\"<\/span>&gt;<\/span>Accept<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">button<\/span>&gt;<\/span>\r\n            <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span>&gt;<\/span>\r\n        <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span>&gt;<\/span>\r\n    <span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span>&gt;<\/span>\r\n<span class=\"hljs-tag\" style=\"color: rgb(186, 98, 54);\">&lt;\/<span class=\"hljs-name\" style=\"color: rgb(186, 98, 54);\">div<\/span>&gt;<\/span><\/pre>\n<h2>Display Cookie Consent Popup with JavaScript<\/h2>\n<p>The <b>JavaScript Cookies<\/b> is used to handle the visibility of the Cookie Consent Popup.<\/p>\n<ul class=\"bullet_disk_list\">\n<li><b>setCookie()<\/b> &#8211; Create cookies with <code>document.cookie<\/code> property.<\/li>\n<li><b>deleteCookie()<\/b> &#8211; Delete cookies with <code>document.cookie<\/code> property.<\/li>\n<li><b>getCookie()<\/b> &#8211; Read cookies with <code>document.cookie<\/code> property.<\/li>\n<li><b>acceptCookieConsent()<\/b> &#8211; Set cookie acceptance flag in JavaScript Cookies and hide Cookie Consent Popup for next 30 days. This function triggers when the user accepts the cookie on the consent popup.<\/li>\n<\/ul>\n<pre style=\"color: rgb(110, 107, 94);\"><span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Create cookie<\/span>\r\n<span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span> <span class=\"hljs-title\" style=\"color: rgb(102, 132, 225);\">setCookie<\/span>(<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\">cname, cvalue, exdays<\/span>) <\/span>{\r\n    <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">const<\/span> d = <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">new<\/span> <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">Date<\/span>();\r\n    d.setTime(d.getTime() + (exdays*<span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">24<\/span>*<span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">60<\/span>*<span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">60<\/span>*<span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">1000<\/span>));\r\n    <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">let<\/span> expires = <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"expires=\"<\/span>+ d.toUTCString();\r\n    <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.cookie = cname + <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"=\"<\/span> + cvalue + <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\";\"<\/span> + expires + <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\";path=\/\"<\/span>;\r\n}\r\n\r\n<span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Delete cookie<\/span>\r\n<span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span> <span class=\"hljs-title\" style=\"color: rgb(102, 132, 225);\">deleteCookie<\/span>(<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\">cname<\/span>) <\/span>{\r\n    <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">const<\/span> d = <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">new<\/span> <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">Date<\/span>();\r\n    d.setTime(d.getTime() + (<span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">24<\/span>*<span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">60<\/span>*<span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">60<\/span>*<span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">1000<\/span>));\r\n    <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">let<\/span> expires = <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"expires=\"<\/span>+ d.toUTCString();\r\n    <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.cookie = cname + <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"=;\"<\/span> + expires + <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\";path=\/\"<\/span>;\r\n}\r\n\r\n<span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Read cookie<\/span>\r\n<span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span> <span class=\"hljs-title\" style=\"color: rgb(102, 132, 225);\">getCookie<\/span>(<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\">cname<\/span>) <\/span>{\r\n    <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">let<\/span> name = cname + <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"=\"<\/span>;\r\n    <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">let<\/span> decodedCookie = <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">decodeURIComponent<\/span>(<span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.cookie);\r\n    <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">let<\/span> ca = decodedCookie.split(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">';'<\/span>);\r\n    <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">for<\/span>(<span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">let<\/span> i = <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">0<\/span>; i &lt;ca.length; i++) {\r\n        <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">let<\/span> c = ca[i];\r\n        <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">while<\/span> (c.charAt(<span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">0<\/span>) == <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">' '<\/span>) {\r\n            c = c.substring(<span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">1<\/span>);\r\n        }\r\n        <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">if<\/span> (c.indexOf(name) == <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">0<\/span>) {\r\n            <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">return<\/span> c.substring(name.length, c.length);\r\n        }\r\n    }\r\n    <span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">return<\/span> <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"\"<\/span>;\r\n}\r\n\r\n<span class=\"hljs-comment\" style=\"color: rgb(125, 122, 104);\">\/\/ Set cookie consent<\/span>\r\n<span class=\"hljs-function\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">function<\/span> <span class=\"hljs-title\" style=\"color: rgb(102, 132, 225);\">acceptCookieConsent<\/span>(<span class=\"hljs-params\" style=\"color: rgb(182, 86, 17);\"><\/span>)<\/span>{\r\n    deleteCookie(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'user_cookie_consent'<\/span>);\r\n    setCookie(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">'user_cookie_consent'<\/span>, <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">1<\/span>, <span class=\"hljs-number\" style=\"color: rgb(182, 86, 17);\">30<\/span>);\r\n    <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.getElementById(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"cookieNotice\"<\/span>).style.display = <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"none\"<\/span>;\r\n}<\/pre>\n<p>The following code will check the cookie acceptance flag in JavaScript Cookies when the web page is loaded.<\/p>\n<ul class=\"bullet_disk_list\">\n<li>If already accepted, it will hide the Cookie Consent Popup. Otherwise, the Cookie Consent Popup will be displayed.<\/li>\n<\/ul>\n<pre style=\"color: rgb(110, 107, 94);\"><span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">let<\/span> cookie_consent = getCookie(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"user_cookie_consent\"<\/span>);\r\n<span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">if<\/span>(cookie_consent != <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"\"<\/span>){\r\n    <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.getElementById(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"cookieNotice\"<\/span>).style.display = <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"none\"<\/span>;\r\n}<span class=\"hljs-keyword\" style=\"color: rgb(184, 84, 212);\">else<\/span>{\r\n    <span class=\"hljs-built_in\" style=\"color: rgb(182, 86, 17);\">document<\/span>.getElementById(<span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"cookieNotice\"<\/span>).style.display = <span class=\"hljs-string\" style=\"color: rgb(96, 172, 57);\">\"block\"<\/span>;\r\n}<\/pre>\n<p class=\"seeAlso\"><span><\/span><a href=\"https:\/\/www.codexworld.com\/store-data-in-cookies-with-javascript\/\">Store Data in Cookies with JavaScript<\/a><\/span><\/p>\n<h2>Conclusion<\/h2>\n<p>The Cookie Consent Popup functionality is easy to implement with JavaScript. This example script helps you to add <b>Cookie Consent Popup<\/b> on the website instantly. Minimal JavaScript code is used to build the Cookie Consent popup with HTML and CSS. You can enhance the functionality of this lightweight JavaScript Cookie Consent Popup script as per your needs.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Nowadays, almost all websites are using cookies to collect various types of information. If your website uses cookies, the visitors must be aware of the cookie policy. In this case, a Cookie Consent Popup can <\/p>\n","protected":false},"author":1,"featured_media":4689,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[10],"tags":[342,66,126],"class_list":["post-4687","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-cookie","tag-javascript","tag-popup","cat-10-id","has_thumb"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Cookie Consent Popup with JavaScript - CodexWorld<\/title>\n<meta name=\"description\" content=\"JavaScript Cookie Consent Popup - Create and display cookie consent popup with JavaScript. Add cookie notification dialog to the website using JavaScript and HTML.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codexworld.com\/cookie-consent-popup-with-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Cookie Consent Popup with JavaScript - CodexWorld\" \/>\n<meta property=\"og:description\" content=\"JavaScript Cookie Consent Popup - Create and display cookie consent popup with JavaScript. Add cookie notification dialog to the website using JavaScript and HTML.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codexworld.com\/cookie-consent-popup-with-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"CodexWorld\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:published_time\" content=\"2021-08-05T18:23:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-08-05T18:34:01+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2021\/08\/cookie-consent-popup-with-javascript-html-css-codexworld.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1366\" \/>\n\t<meta property=\"og:image:height\" content=\"768\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"CodexWorld\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@codexworldblog\" \/>\n<meta name=\"twitter:site\" content=\"@codexworldweb\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"CodexWorld\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/cookie-consent-popup-with-javascript\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/cookie-consent-popup-with-javascript\\\/\"},\"author\":{\"name\":\"CodexWorld\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\"},\"headline\":\"Cookie Consent Popup with JavaScript\",\"datePublished\":\"2021-08-05T18:23:50+00:00\",\"dateModified\":\"2021-08-05T18:34:01+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/cookie-consent-popup-with-javascript\\\/\"},\"wordCount\":349,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/cookie-consent-popup-with-javascript\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2021\\\/08\\\/cookie-consent-popup-with-javascript-html-css-codexworld.png\",\"keywords\":[\"Cookie\",\"JavaScript\",\"Popup\"],\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/cookie-consent-popup-with-javascript\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/cookie-consent-popup-with-javascript\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/cookie-consent-popup-with-javascript\\\/\",\"name\":\"Cookie Consent Popup with JavaScript - CodexWorld\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/cookie-consent-popup-with-javascript\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/cookie-consent-popup-with-javascript\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2021\\\/08\\\/cookie-consent-popup-with-javascript-html-css-codexworld.png\",\"datePublished\":\"2021-08-05T18:23:50+00:00\",\"dateModified\":\"2021-08-05T18:34:01+00:00\",\"description\":\"JavaScript Cookie Consent Popup - Create and display cookie consent popup with JavaScript. Add cookie notification dialog to the website using JavaScript and HTML.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/cookie-consent-popup-with-javascript\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/cookie-consent-popup-with-javascript\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/cookie-consent-popup-with-javascript\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2021\\\/08\\\/cookie-consent-popup-with-javascript-html-css-codexworld.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2021\\\/08\\\/cookie-consent-popup-with-javascript-html-css-codexworld.png\",\"width\":1366,\"height\":768,\"caption\":\"cookie-consent-popup-with-javascript-html-css-codexworld\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/cookie-consent-popup-with-javascript\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.codexworld.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Cookie Consent Popup with JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"name\":\"CodexWorld\",\"description\":\"Web &amp; Mobile App Development Company\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.codexworld.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\",\"name\":\"CodexWorld\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"width\":200,\"height\":19,\"caption\":\"CodexWorld\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldweb\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/codexworld\",\"https:\\\/\\\/www.youtube.com\\\/codexworld\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\",\"name\":\"CodexWorld\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"caption\":\"CodexWorld\"},\"description\":\"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.\",\"sameAs\":[\"http:\\\/\\\/www.codexworld.com\",\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldblog\"],\"url\":\"https:\\\/\\\/www.codexworld.com\\\/author\\\/nitya192265\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Cookie Consent Popup with JavaScript - CodexWorld","description":"JavaScript Cookie Consent Popup - Create and display cookie consent popup with JavaScript. Add cookie notification dialog to the website using JavaScript and HTML.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.codexworld.com\/cookie-consent-popup-with-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Cookie Consent Popup with JavaScript - CodexWorld","og_description":"JavaScript Cookie Consent Popup - Create and display cookie consent popup with JavaScript. Add cookie notification dialog to the website using JavaScript and HTML.","og_url":"https:\/\/www.codexworld.com\/cookie-consent-popup-with-javascript\/","og_site_name":"CodexWorld","article_publisher":"https:\/\/www.facebook.com\/codexworld","article_author":"https:\/\/www.facebook.com\/codexworld","article_published_time":"2021-08-05T18:23:50+00:00","article_modified_time":"2021-08-05T18:34:01+00:00","og_image":[{"width":1366,"height":768,"url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2021\/08\/cookie-consent-popup-with-javascript-html-css-codexworld.png","type":"image\/png"}],"author":"CodexWorld","twitter_card":"summary_large_image","twitter_creator":"@codexworldblog","twitter_site":"@codexworldweb","twitter_misc":{"Written by":"CodexWorld","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codexworld.com\/cookie-consent-popup-with-javascript\/#article","isPartOf":{"@id":"https:\/\/www.codexworld.com\/cookie-consent-popup-with-javascript\/"},"author":{"name":"CodexWorld","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0"},"headline":"Cookie Consent Popup with JavaScript","datePublished":"2021-08-05T18:23:50+00:00","dateModified":"2021-08-05T18:34:01+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codexworld.com\/cookie-consent-popup-with-javascript\/"},"wordCount":349,"commentCount":0,"publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"image":{"@id":"https:\/\/www.codexworld.com\/cookie-consent-popup-with-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2021\/08\/cookie-consent-popup-with-javascript-html-css-codexworld.png","keywords":["Cookie","JavaScript","Popup"],"articleSection":["JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.codexworld.com\/cookie-consent-popup-with-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.codexworld.com\/cookie-consent-popup-with-javascript\/","url":"https:\/\/www.codexworld.com\/cookie-consent-popup-with-javascript\/","name":"Cookie Consent Popup with JavaScript - CodexWorld","isPartOf":{"@id":"https:\/\/www.codexworld.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codexworld.com\/cookie-consent-popup-with-javascript\/#primaryimage"},"image":{"@id":"https:\/\/www.codexworld.com\/cookie-consent-popup-with-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2021\/08\/cookie-consent-popup-with-javascript-html-css-codexworld.png","datePublished":"2021-08-05T18:23:50+00:00","dateModified":"2021-08-05T18:34:01+00:00","description":"JavaScript Cookie Consent Popup - Create and display cookie consent popup with JavaScript. Add cookie notification dialog to the website using JavaScript and HTML.","breadcrumb":{"@id":"https:\/\/www.codexworld.com\/cookie-consent-popup-with-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codexworld.com\/cookie-consent-popup-with-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/cookie-consent-popup-with-javascript\/#primaryimage","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2021\/08\/cookie-consent-popup-with-javascript-html-css-codexworld.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2021\/08\/cookie-consent-popup-with-javascript-html-css-codexworld.png","width":1366,"height":768,"caption":"cookie-consent-popup-with-javascript-html-css-codexworld"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codexworld.com\/cookie-consent-popup-with-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codexworld.com\/"},{"@type":"ListItem","position":2,"name":"Cookie Consent Popup with JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/www.codexworld.com\/#website","url":"https:\/\/www.codexworld.com\/","name":"CodexWorld","description":"Web &amp; Mobile App Development Company","publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codexworld.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codexworld.com\/#organization","name":"CodexWorld","url":"https:\/\/www.codexworld.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","width":200,"height":19,"caption":"CodexWorld"},"image":{"@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldweb","https:\/\/www.linkedin.com\/company\/codexworld","https:\/\/www.youtube.com\/codexworld"]},{"@type":"Person","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0","name":"CodexWorld","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","caption":"CodexWorld"},"description":"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.","sameAs":["http:\/\/www.codexworld.com","https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldblog"],"url":"https:\/\/www.codexworld.com\/author\/nitya192265\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2021\/08\/cookie-consent-popup-with-javascript-html-css-codexworld.png","jetpack_shortlink":"https:\/\/wp.me\/p6bxIh-1dB","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/4687","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/comments?post=4687"}],"version-history":[{"count":1,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/4687\/revisions"}],"predecessor-version":[{"id":4688,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/4687\/revisions\/4688"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media\/4689"}],"wp:attachment":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media?parent=4687"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/categories?post=4687"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/tags?post=4687"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}