Highslide Auto Popup For One Time

Question

Sir / Madam,

I have used Highslide script for auto popup on an index page. So that when user open the website, a popup should get visible that having a custom message. But I want that it should visible only for one time to the user, and if user close the popup it should not visible again till browser session is active. Auto popup code is working properly, but i want it to visible only for one time.

I have used the code below: (Below code should be between head tag)

    <!---For HighSlide Auto Popup--->
          <script type="text/javascript" src="highslide/highslide-full.js"></script>
            <link rel="stylesheet" type="text/css" href="highslide/highslide.css">
          <script type='text/javascript'>//<![CDATA[
              // automatically open a link to a HTML page
              hs.graphicsDir = 'highslide/graphics/';
              hs.align = 'center';
              hs.outlineType = 'rounded-white';
              hs.dimmingOpacity = 0.75;

              hs.addEventListener(window, "load", function() {
              // click the element virtually:
              document.getElementById("autoload").onclick();
              });

              hs.registerOverlay({
             html: '<div class="closebutton" onclick="return hs.close(this)" title="Close"></div>',
             position: 'top right',
             fade: 2 // fading the semi-transparent overlay looks bad in IE
              });
              //]]>
            </script>     
          <!---Ends Here--->

HTML code: (below code should be after body open tag)

    <a id="autoload" class="highslide" href="popup.html" onclick="return hs.htmlExpand(this, {objectType: 'iframe', wrapperClassName: 'draggable-header'})" style="display:none;"></a>

Hope you should do needful as soon as possible....

Answer 1

See this jsFiddle: http://jsfiddle.net/72uny6ba/

HTML code:

<a id="autoload" class="highslide" style="display: none;" href="https://fiddle.jshell.net/roadrash/7AHX9/show/light/" onclick="return hs.htmlExpand(this, {objectType: 'iframe', wrapperClassName: 'draggable-header'})">Autoloaded popup</a>

JavaScript for cookie and autoload:

// cookie
    function bakecookie(name, value) {
       var argv = bakecookie.arguments;
       var argc = bakecookie.arguments.length;
       var daysgood = (argc > 2) ? argv[2] : null;
       var path = (argc > 3) ? argv[3] : "/";
       var domain = (argc > 4) ? argv[4] : null;
       var secure = (argc > 5) ? argv[5] : false;
       var expires = new Date();
       expires.setDate (expires.getDate()+daysgood);
       document.cookie = name + "=" + escape (value) +((daysgood == null) ? "" : ("; expires=" + expires.toGMTString())) +((path == null) ? "" : ("; path=" + path)) +((domain == null) ? "" : ("; domain=" + domain)) +((secure == true) ? "; secure" : "");
    }

    function eatcookie(name) {
       var arg = name + "=";
       var alen = arg.length;
       var clen = document.cookie.length;
       var i = 0;
       while (i < clen) {
          var j = i + alen;
          if (document.cookie.substring(i, j) == arg) {return eatcookieval (j);}
          i = document.cookie.indexOf(" ", i) + 1;
          if (i == 0) {break;}
       }
       return null;
    }

    function eatcookieval(offset){
       var endstr=document.cookie.indexOf(";",offset);
       if (endstr == -1) {endstr = document.cookie.length;}
       return unescape(document.cookie.substring(offset,endstr));
    } 

// autoload popup
hs.addEventListener(window, "load", function () {
    // click the element virtually:
    if (!eatcookie('YouveSeenOurNewSite')) {
        document.getElementById("autoload").onclick();
    }
});

// set the cookie
hs.Expander.prototype.onAfterExpand = function (sender) {
    bakecookie('YouveSeenOurNewSite', true, 365);
};