javascript - How to make my pop up disappear after 3 seconds -
i new this, can tell me how can make popup disappear in 3 seconds instead of clicking on x right now.
i have tried putting close_popup anywhere , still didn't work.
jquery(document).ready(function($) { "use strict"; var popup = $('#yith-wacp-popup'), overlay = popup.find( '.yith-wacp-overlay'), close = popup.find( '.yith-wacp-close'), wrapper = popup.find( '.yith-wacp-wrapper'), wrapper_w = wrapper.width(), wrapper_h = wrapper.height(), close_popup = function(){ // remove class open popup.removeclass( 'open' ); // after 2 sec remove content settimeout(function () { popup.find('.yith-wacp-content').html(''); }, 2000); $(document).trigger( 'yith_wacp_popup_after_closing' ); }, // center popup function center_popup = function () { var window_w = $(window).width(), window_h = $(window).height(), width = ( ( window_w - 60 ) > wrapper_w ) ? wrapper_w : ( window_w - 60 ), height = ( ( window_h - 120 ) > wrapper_h ) ? wrapper_h : ( window_h - 120 ); wrapper.css({ 'left' : (( window_w/2 ) - ( width/2 )), 'top' : (( window_h/2 ) - ( height/2 )), 'width' : width + 'px', 'height' : height + 'px' }); }; $( window ).on( 'resize', center_popup ); $('body').on( 'added_to_cart', function( ev, fragmentsjson, cart_hash, button ){ if( typeof fragmentsjson == 'undefined' ) fragmentsjson = $.parsejson( sessionstorage.getitem( wc_cart_fragments_params.fragment_name ) ); $.each( fragmentsjson, function( key, value ) { if ( key == 'yith_wacp_message' ) { popup.find('.yith-wacp-content').html( value ); // position popup center_popup(); popup.addclass('open'); popup.find( 'a.continue-shopping' ).on( 'click', function (e) { e.preventdefault(); close_popup(); }); return false; } }); }); // close box click close button close.on( 'click', function(ev){ ev.preventdefault(); close_popup(); }); });
have tried using .delay function.since jquery 1.4 can use .delay function. i'm providing jsfiddle code:
$('#test').delay(3000).fadeout();
$(function() { $('#test').delay(3000).fadeout(); });
#test { width: 100px; height: 100px; background: #ffb; padding: 10px; border: 2px solid #999; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="test">test</div>
Comments
Post a Comment