javascript - how to use cookies to prevent a jquery popup to after click action -
hello first time asking question on here, hope im not asking much, created lightbox type pop starts after 20 seconds, site, dont want popup keep reappearing if continue browsing(session cookie), have tried creating cookies seems not doing correctly. if can appreciate thank you.
window.settimeout(function () { $('.popupbox').ready(function () { $('.backdrop, .box').animate({ 'opacity': '.50' }, 300, 'linear'); $('.box').animate({ 'opacity': '1.00' }, 300, 'linear'); $('.backdrop, .box').css('display', 'block'); }); $('.close').click(function () { close_pop(); }); $('.backdrop').click(function () { close_pop(); }); }, 20000); if (!readcookie('hide')) { $('.popupbox').show(); } function close_pop() { $('.backdrop, .box').animate({ 'opacity': '0' }, 300, 'linear', function () { $('.backdrop, .box').css('display', 'none'); }); $.cookie('hide', true, 1, { path: '/' }); return false; }
the below code display div after 20 seconds if user clicks inside div or on close div hide , won't show again unless lose cookies, on reload.
special note: unfortunately jquery.cookie.js plugin doesn't have cdn inline included below...please don't in production include using normal script includes.
demo: jquery jsfiddle
html
<div class="popupbox" style="display: none;"> <div class="backdrop box"> <span>hello world popup.</span> <input type="button" class="close" value="close" /> </div> </div> js
$(function () { if (!$.cookie('hide')) { window.settimeout(function () { $('.popupbox').show(); $('.popupbox').ready(function () { $('.backdrop, .box').animate({ 'opacity': '.50' }, 300, 'linear'); $('.box').animate({ 'opacity': '1.00' }, 300, 'linear'); $('.backdrop, .box').css('display', 'block'); }); $('.close').click(function () { close_pop(); }); $('.backdrop').click(function () { close_pop(); }); }, 20000); } }); function close_pop() { $('.backdrop, .box').animate({ 'opacity': '0' }, 300, 'linear', function () { $('.backdrop, .box').css('display', 'none'); }); $.cookie('hide', true); return false; } /*! * jquery cookie plugin v1.3.1 * https://github.com/carhartl/jquery-cookie * * copyright 2013 klaus hartl * released under mit license */ (function (factory) { if (typeof define === 'function' && define.amd) { // amd. register anonymous module. define(['jquery'], factory); } else { // browser globals. factory(jquery); } }(function ($) { var pluses = /\+/g; function raw(s) { return s; } function decoded(s) { return decodeuricomponent(s.replace(pluses, ' ')); } function converted(s) { if (s.indexof('"') === 0) { // quoted cookie according rfc2068, unescape s = s.slice(1, -1).replace(/\\"/g, '"').replace(/\\\\/g, '\\'); } try { return config.json ? json.parse(s) : s; } catch (er) {} } var config = $.cookie = function (key, value, options) { // write if (value !== undefined) { options = $.extend({}, config.defaults, options); if (typeof options.expires === 'number') { var days = options.expires, t = options.expires = new date(); t.setdate(t.getdate() + days); } value = config.json ? json.stringify(value) : string(value); return (document.cookie = [ config.raw ? key : encodeuricomponent(key), '=', config.raw ? value : encodeuricomponent(value), options.expires ? '; expires=' + options.expires.toutcstring() : '', // use expires attribute, max-age not supported ie options.path ? '; path=' + options.path : '', options.domain ? '; domain=' + options.domain : '', options.secure ? '; secure' : ''].join('')); } // read var decode = config.raw ? raw : decoded; var cookies = document.cookie.split('; '); var result = key ? undefined : {}; (var = 0, l = cookies.length; < l; i++) { var parts = cookies[i].split('='); var name = decode(parts.shift()); var cookie = decode(parts.join('=')); if (key && key === name) { result = converted(cookie); break; } if (!key) { result[name] = converted(cookie); } } return result; }; config.defaults = {}; $.removecookie = function (key, options) { if ($.cookie(key) !== undefined) { // must not alter options, extending fresh object... $.cookie(key, '', $.extend({}, options, { expires: -1 })); return true; } return false; }; })); demo: javascript jsfiddle
html
<div class="popupbox" style="display: none;"> <div class="backdrop box"> <span>hello world popup.</span> <input type="button" class="close" value="close" onclick="close_pop()" /> </div> </div> js
function close_pop() { $('.backdrop, .box').animate({ 'opacity': '0' }, 300, 'linear', function () { $('.backdrop, .box').css('display', 'none'); }); setcookie('hide', true, 365); return false; } function getcookie(c_name) { var c_value = document.cookie; var c_start = c_value.indexof(" " + c_name + "="); if (c_start == -1) { c_start = c_value.indexof(c_name + "="); } if (c_start == -1) { c_value = null; } else { c_start = c_value.indexof("=", c_start) + 1; var c_end = c_value.indexof(";", c_start); if (c_end == -1) { c_end = c_value.length; } c_value = unescape(c_value.substring(c_start, c_end)); } return c_value; } function setcookie(c_name, value, exdays) { var exdate = new date(); exdate.setdate(exdate.getdate() + exdays); var c_value = escape(value) + ((exdays == null) ? "" : "; expires=" + exdate.toutcstring()); document.cookie = c_name + "=" + c_value; } window.onload=function () { if (!getcookie('hide')) { window.settimeout(function () { $('.popupbox').show(); $('.popupbox').ready(function () { $('.backdrop, .box').animate({ 'opacity': '.50' }, 300, 'linear'); $('.box').animate({ 'opacity': '1.00' }, 300, 'linear'); $('.backdrop, .box').css('display', 'block'); }); $('.close').click(function () { close_pop(); }); $('.backdrop').click(function () { close_pop(); }); //change 1000 20000 20 seconds }, 1000); } }
Comments
Post a Comment