kaioe
8/23/2017 - 1:30 AM

JQuery: popup

My personal Popup, need JQuery

var popupImg = '/wp-content/uploads/sites/12/2017/08/BestLuxe-Giveaway-Large-Popup.jpg',
    cover = $('<div class="popup-cover hidden"><div class="popup-window"><div class="close"><i class="fa fa-fw fa-times"></i></div><img src="'+popupImg+'"></div></div>'),
    flag = localStorage.getItem("popupTime");
    console.log("flag", flag);

if (flag != '20170823') {
  setTimeout(function(){

    cover
      .prependTo('body')
      .css({
        'background-color':'rgba(0,0,0,.8)',
        'position':'fixed',
        'display':'block',
        'height':'100%',
        'z-index':'99999',
        'width':'100%'
      })
      .removeClass('hidden')
      .on('click', function(event) {
        event.preventDefault();
        event.stopPropagation();
        console.log('Cover clicked');
        $(this).addClass('hidden');
      })
      .end()
      .find('.close')
      .css({
        'display':'block',
        'position':'absolute',
        'height':'50px',
        'width':'50px',
        'background':'white',
        'font-size':'50px',
        'line-height':'50px',
        'top':'0',
        'right':'0',
        'z-index':'999',
        'cursor':'pointer'
      })
      .on('click', function(event) {
        event.preventDefault();
        event.stopPropagation();
        $(this).closest('.popup-cover').addClass('hidden');
        console.log('Close clicked');
        localStorage.setItem("popupTime", "20170823");
      })
      .find('.fa-fw')
      .css('width', '100%')
      .end()
      .end()
      .find('.popup-window')
      .css({
        'display':'block',
        'height':'auto',
        'max-width':'600px',
        'position':'relative',
        'top':'75px',
        'left':'50%',
        'transform':'translateX(-50%)',
        'cursor':'pointer'
      })
      .on('click', function(event) {
        event.preventDefault();
        event.stopPropagation();
        console.log('Banner clicked');
        location.href = '/win/';
      });

  }, 2000);
}