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