Question

我有一个网站上的模式弹出窗口（来自topModal）（我知道他们很烦人，但我的客户坚持！）在页面登陆3秒后弹出。

我有没有办法让它只在第一次访问后弹出？ ...因此，如果用户返回主页，则不会再次弹出。如果是这样，有人可以解释一下这是怎么做的（我还在学习）？

＆＃13;

;( 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 );

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

您必须编写要与之比较的数据，并决定是否实例化＆＃34; topmodals＆＃34;。

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';

首次访问后停止模式弹出

1 个答案: