pophiccup_script.js

// Append script to head.
var _pophiccup_script = document.createElement("script")
_pophiccup_script.type = "text/javascript";
_pophiccup_script.src = "https://cdnjs.cloudflare.com/ajax/libs/ouibounce/0.0.12/ouibounce.min.js";
_pophiccup_script.crossOrigin="anonymous";
_pophiccup_script.integrity="sha512-3YT22Fw1AUW4I3ww7mROUxleX/WhHY1uh6ZbWL5bRyqDNc8UE8UQf4otTicqtpzXEeSa2Ct3aZ/8gpjVcsz9LQ==";

document.getElementsByTagName("head")[0].appendChild(_pophiccup_script);

_pophiccup_script.onload = function(){

  // The popup.
        var _ouibounce = ouibounce(document.getElementById('pophiccup-modal'), {
          aggressive: true,
          timer: 0,
          callback: function() { console.log('pophiccup fired!'); }
        });
  
};



        var _pophiccup_style = document.createElement('style');
        _pophiccup_style.type = 'text/css';
        _pophiccup_style.innerHTML = "#pophiccup-modal{font-family:'Open Sans', sans-serif;display:none;position:fixed;top:0;left:0;width:100%;height:100%; z-index: 9999;}#pophiccup-modal .pophiccup-modal-underlay{width:100%;height:100%;position:absolute;top:0;left:0;background-color:rgba(0,0,0,0.5);cursor:pointer;-webkit-animation:fadein 0.5s;animation:fadein 0.5s;}#pophiccup-modal .pophiccup-inner-modal{width:600px;height:400px;z-index:1;position:absolute;margin:auto;top:0;right:0;bottom:0;left:0;border-radius:4px;-webkit-animation:popin 0.3s;animation:popin 0.3s;background-color:unset;border-radius:5px;width:-webkit-fit-content;height:-webkit-fit-content;width:-moz-fit-content;height:-moz-fit-content;cursor:pointer;}#pophiccup-modal-img{width:50%;max-width: 800px;border-radius:5px;transform:translate(50%, 0%);}@-webkit-keyframes fadein{0%{opacity:0;} 100%{opacity:1;}}@-ms-keyframes fadein{0%{opacity:0;} 100%{opacity:1;}}@keyframes fadein{0%{opacity:0;} 100%{opacity:1;}}@-webkit-keyframes popin{0%{-webkit-transform:scale(0);transform:scale(0);opacity:0;} 85%{-webkit-transform:scale(1.05);transform:scale(1.05);opacity:1;} 100%{-webkit-transform:scale(1);transform:scale(1);opacity:1;}}@-ms-keyframes popin{0%{-ms-transform:scale(0);transform:scale(0);opacity:0;} 85%{-ms-transform:scale(1.05);transform:scale(1.05);opacity:1;} 100%{-ms-transform:scale(1);transform:scale(1);opacity:1;}}@keyframes popin{0%{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);opacity:0;} 85%{-webkit-transform:scale(1.05);-ms-transform:scale(1.05);transform:scale(1.05);opacity:1;} 100%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1);opacity:1;}}/*****/#pophiccup-popup-close-btn{position:absolute;z-index:9999;width:25px;height:25px;cursor:pointer;background:gray;border-radius:50%;border:none;outline:none;cursor:pointer !important;top:1%;right:25.5%;}#pophiccup-popup-close-btn span:nth-child(1){FONT-VARIANT-EAST-ASIAN:JIS04;position:absolute;width:20px;height:4px;top:50%;left:50%;background:white;border-radius:2px;overflow:hidden;transform:translate(-50%, -50%) rotate(-45deg);cursor:pointer !important;}#pophiccup-popup-close-btn span:nth-child(2){position:absolute;width:20px;height:4px;top:50%;left:50%;background:white;border-radius:2px;overflow:hidden;transform:translate(-50%, -50%) rotate(45deg);cursor:pointer !important;}";

        document.getElementsByTagName('head')[0].appendChild(_pophiccup_style);
        

  //-------------------

  var _pophiccup_link = "https://apps.softlogicinvest.lk/welcome/";

  var _pophiccup_img = "https://i.imgur.com/gdkaa7P.jpg";

  var _pophiccup_div = document.createElement('div');

  _pophiccup_div.setAttribute('id', 'pophiccup-modal');

  _pophiccup_div.style.display = 'none';

  _pophiccup_div.innerHTML = '<div class="pophiccup-modal-underlay"></div><div class="pophiccup-inner-modal"><button id="pophiccup-popup-close-btn" class=""><span></span><span></span></button><a id="pophiccup-modal-img-link" href="' + _pophiccup_link + '" target="_blank"><img id="pophiccup-modal-img" src="' + _pophiccup_img + '"></a></div>';

  document.body.appendChild(_pophiccup_div);



  //------------------







var cards = document.querySelectorAll(".pophiccup-modal-underlay, .pophiccup-inner-modal, #pophiccup-popup-close-btn");
for (var i = 0; i < cards.length; i++) {
	var card = cards[i];
	card.onclick = function () {
		document.getElementById( "pophiccup-modal" ).style.display = "none";
	};
}