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

Question

我对此还很陌生，但是有人可以告诉我如何让这个弹出窗口在 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();
    });



});

Answer 1

您尝试过使用 .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>