jquery - Stopping modal popup after first visit -
i have modal popup (from topmodal) on website (i know they're annoying client insisted!) pops after 3 seconds of landing on page.
is there way can have pops after first visit? ...so if user goes homepage won't popup again. if so, please explain how 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 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: .3s; transition: .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: .3s; transition: .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&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 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 in , expect things - not remove 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>
you have write data compare , decide instantiate or not "topmodals".
if(localstorage['visited']!='yes'){ // 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 localstorage value next visit... localstorage['visited'] = 'yes';
Comments
Post a Comment