Stopping modal popup after first visit

Question

I have this modal popup (from topModal) on a website (i know they're annoying but my client insisted!) that pops up after 3 seconds of landing on the page.

Is there a way I can have it so it only pops up after the first visit? ...so if the user goes back to the homepage it won't popup again. If so, could someone please explain how this is done please (I'm still learning)?

;( function( $, window, document, undefined ) {

  'use strict';

  var pluginName = 'topmodal',
      defaults = {
        topmodal:             '.js-topmodal',
        topmodalBtn:          '.js-topmodal-btn',
        topmodalBtnClose:     '.js-topmodal-btn-close',
        topmodalContainer:    '.js-topmodal-container',
        topmodalOverlay:      '.js-topmodal-overlay'
      };

  function Plugin ( element, options ) {
    this.element = element;
    this.settings = $.extend( {}, defaults, options );
    this._defaults = defaults;
    this._name = pluginName;
    this.init();
  }

  $.extend( Plugin.prototype, {
    init: function() {
      var _obj = this.settings;
      Plugin.prototype.handlerMethods( _obj );
    },

    handlerMethods: function( _obj ) {
      setTimeout(function() {
        Plugin.prototype.show( _obj );
        Plugin.prototype.showContainer( _obj );
        Plugin.prototype.showOverlay( _obj );
      }, 3000); //set time here now 3 seconds

      $( document ).on( 'click', _obj.topmodalBtn, function() {
        Plugin.prototype.show( _obj );
        Plugin.prototype.showContainer( _obj );
        Plugin.prototype.showOverlay( _obj );
      });

      $( document ).on( 'click', _obj.topmodalBtnClose, function() {
        Plugin.prototype.hide( _obj );
        Plugin.prototype.hideContainer( _obj );
        Plugin.prototype.hideOverlay( _obj );
      });

      $( document ).on( 'click', _obj.topmodalContainer, function() {
        Plugin.prototype.hide( _obj );
        Plugin.prototype.hideContainer( _obj );
        Plugin.prototype.hideOverlay( _obj );
      });

      $( document ).on( 'click', _obj.topmodal, function( event ) {
        event.stopPropagation();
      });
    },

    show: function( _obj ) {
      $( _obj.topmodal ).addClass( 'is-open' );
    },

    hide: function( _obj ) {
      $( _obj.topmodal ).removeClass( 'is-open' );
    },

    showContainer: function( _obj ) {
      $( _obj.topmodalContainer ).addClass( 'is-open' );
    },

    hideContainer: function( _obj ) {
      $( _obj.topmodalContainer ).removeClass( 'is-open' );
    },

    showOverlay: function( _obj ) {
      $( _obj.topmodalOverlay ).addClass( 'is-open' );
    },

    hideOverlay: function( _obj ) {
      $( _obj.topmodalOverlay ).removeClass( 'is-open' );
    }
  });

  $.fn[ pluginName ] = function( options ) {
    return this.each( function() {
      if ( !$.data( this, "plugin_" + pluginName ) ) {
        $.data( this, "plugin_" +
               pluginName, new Plugin( this, options ) );
      }
    } );
  };

} )( jQuery, window, document );

.topmodal {
  background: #1d1c1b;
  box-sizing: border-box;
  display: none;
  position: relative;
  padding: 20px;
  max-width: 500px;
  width: 100%;
  vertical-align: middle;
  z-index: 10000;
  border: 3px solid #7A7A7A;
  border-radius: 10px;
}

.topmodal.is-open {
  display: inline-block;
}

.topmodal-overlay {
  background: rgba(0, 0, 0, 0.8);
  display: none;
  position: fixed;
  top: -100%;
  bottom: -100%;
  left: -100%;
  right: -100%;
  cursor: pointer;
}

.topmodal-overlay.is-open {
  display: block;
  z-index: 9999;
}

.topmodal-container {
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  width: 100%;
  height: 100%;
  display: none;
  text-align: center !important;
  overflow: auto;
  padding: 10px 10px 0;
}

.topmodal-container.is-open {
  display: block;
}

.topmodal-container:after {
  content: '';
  display: inline-block;
  margin-left: -.05em;
  height: 100%;
  vertical-align: middle;
}

input.button_popup_sub {
  display: block;
  text-decoration:none;
  padding:12px 20px;
  background-color:#006bb6;
  color:#1d1c1b;
  margin:10px auto 0px auto;
  font-size:1em;
  -webkit-transition: all .3s;
  transition: all .3s;
  -webkit-appearance:none;
  border:0;
  cursor:pointer;
  text-transform:uppercase;
  font-family: 'Open Sans', sans-serif;
  font-weight:bold; 
  width: 100%;
  border-radius: 5px;
}

button.js-topmodal-btn-close {
  display: block;
  text-decoration:none;
  padding:10px 20px;
  background-color:#3E3E3E;
  color:#1d1c1b;
  margin:10px auto 0px auto;
  font-size:.8em;
  -webkit-transition: all .3s;
  transition: all .3s;
  -webkit-appearance:none;
  border:0;
  cursor:pointer;
  text-transform:uppercase;
  font-family: 'Open Sans', sans-serif;
  font-weight:bold; 
  width: 90%;
  border-radius: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE HTML>
<html>

  <head>
    <title>test</title>
  </head>

  <body>



    <div class="topmodal-container js-topmodal-container">
      <div class="topmodal js-topmodal" data-modal="a">
        <div id="mc_embed_signup">
          <form action="//sklz.us12.list-manage.com/subscribe/post?u=1c357725f18822f30cba9cbf2&amp;id=3b6b7bd177" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
            <div id="mc_embed_signup_scroll">
              <label style="margin-bottom:20px;" for="mce-EMAIL">Join the Unicorn Australia mailing list</label>
              <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required>
              <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
              <div style="position: absolute; left: -5000px;" aria-hidden="true">
                <input type="text" name="b_1c357725f18822f30cba9cbf2_3b6b7bd177" tabindex="-1" value="">
              </div>
              <div class="clear">
                <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button_popup_sub">
              </div>
            </div>
          </form>
        </div>
        <button class="js-topmodal-btn-close">Close</button>
      </div>
    </div>
    <div class="topmodal-overlay js-topmodal-overlay"></div>

    <!--scripts-->


    <script>
      $(document).ready(function () {
        $('.js-topmodal--log').topmodal({
          topmodal:         '.js-topmodal--log',
          topmodalBtn:      '.js-topmodal-btn--log',
          topmodalBtnClose: '.js-topmodal-btn-closesss'
        });

        $('.js-topmodal--reg').topmodal({
          topmodal:          '.js-topmodal--reg',
          topmodalBtn:       '.js-topmodal-btn--reg'
        });

        $('.js-topmodal').topmodal();
      });
    </script>


  </body>

</html>

Answer 1

You have to write a data to compare with and decide to instantiate or not the "topmodals".

if(localStorage['visited']!='yes'){    // This is the check

  console.log("Not visited yet... Showing modal.");

  $('.js-topmodal--log').topmodal({
    topmodal:         '.js-topmodal--log',
    topmodalBtn:      '.js-topmodal-btn--log',
    topmodalBtnClose: '.js-topmodal-btn-closesss'
  });

  $('.js-topmodal--reg').topmodal({
    topmodal:          '.js-topmodal--reg',
    topmodalBtn:       '.js-topmodal-btn--reg'
  });

  $('.js-topmodal').topmodal();

}else{
  console.log("Visited... Not showing modal.");
}

// Write the localStorage value for next visit...
localStorage['visited'] =  'yes';