如何让我的弹出窗口在3秒后消失

时间:2017-08-18 07:00:14

标签: javascript jquery popup

我对此很新,但是有人可以告诉我如何让这个弹出窗口在3秒内消失,而不是像现在这样点击X.

我已经尝试将close_popup放在几乎任何地方但它仍然无效。

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 by click close button
    close.on( 'click', function(ev){
        ev.preventDefault();        
        close_popup();
    });



});

2 个答案:

答案 0 :(得分:3)

您是否尝试过使用.delay函数。自Jquery 1.4起,您可以使用.delay函数。我正在为你提供jsfiddle代码:

$('#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>

答案 1 :(得分:0)

一旦pop_up在if循环中打开,你可以尝试这段代码吗?

setTimeout(function () {
        close_popup();
    }, 3000);