jQuery(window).load(function() { if(Cookies.get("cookie_popup<?php echo $ppid;?>") != 'hide_popup'){ setTimeout(function () { jQuery('#front_add_popup').show(); jQuery('#front_add_popup').addClass('show'); }, 10000); } }); jQuery(document).on("click", ".popup_cookie_btn", function ($) { jQuery('#front_add_popup').removeClass('show'); jQuery('#front_add_popup').hide(); var date = new Date(); var ex_time = <?php echo $cookie_expiration_time;?> * 60 * 1000; console.log(ex_time); date.setTime(date.getTime() + (ex_time)); console.log(date); Cookies.set('cookie_popup<?php echo $ppid;?>', 'hide_popup', { expires: date, path: '/' }) });
<?php $ppid = get_the_ID(); $popup_disable = get_field('popup_disable'); $popup_image = get_field('image'); $popup_heading = get_field('heading'); $popup_sub_heading = get_field('sub_heading'); $popup_shortcode = get_field('shortcode'); $cookie_expiration_time = get_field('cookie_expiration_time_set_in_minutes'); if($popup_disable!='true'){?> <div id="front_add_popup" class="modal modal<?php echo $ppid;;?> "> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <button type="button" id="" class="popup_cookie_btn" data-dismiss="modal"><span>×</span></button> <div class="newsletter-content"> <?php if($popup_image!=''){?> <div class="block-left"> <figure> <img class="main-image" src="<?php echo $popup_image;?>" alt=""></figure> </div> <?php }?> <div class="block-right"> <div class="inner"> <h2><?php echo $popup_heading;?></h2> <h3><?php echo $popup_sub_heading;?></h3> <?php if($popup_shortcode!=""){echo do_shortcode($popup_shortcode);} ?> </div> </div> </div> </div> </div> </div> <?php }
.modal{ display: none; position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.7); transition: opacity 500ms; visibility: hidden; opacity: 0; z-index: 99999; } .modal.show{ opacity: 1; visibility: visible; }
<script src="https://cdn.jsdelivr.net/npm/js-cookie@rc/dist/js.cookie.min.js"></script>
Jagdish Sarma Asked question May 8, 2021