javascript - 如何在3秒内自动隐藏弹出窗口。

我需要在单击按钮的同时显示弹出窗口3秒钟，然后弹出窗口将在3秒后自动隐藏。仅在第一次单击按钮后弹出窗 Eloquent 能隐藏，它才有效。
请帮我怎么做。

谢谢。

    <div id="notification" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" style="font-family: "Roboto Condensed",sans-serif!important;"><?php if($theme_options->get( 'confirmation_text', $config->get( 'config_language_id' ) ) != '') { echo $theme_options->get( 'confirmation_text', $config->get( 'config_language_id' ) ); } else { echo 'Confirmation'; } ?></h4>
            </div>
            <div class="modal-body">
                <p></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="button modal-left-button"  data-dismiss="modal"><?php if($theme_options->get( 'continue_shopping_text', $config->get( 'config_language_id' ) ) != '') { echo $theme_options->get( 'continue_shopping_text', $config->get( 'config_language_id' ) ); } else { echo 'Continue shopping'; } ?></button>
                <a href="<?php echo $shopping_cart; ?>" class="button modal-right-button"><?php if($theme_options->get( 'checkout_text', $config->get( 'config_language_id' ) ) != '') { echo $theme_options->get( 'checkout_text', $config->get( 'config_language_id' ) ); } else { echo 'View Cart'; } ?></a>
            </div>
        </div>
    </div>
</div>

这是我的jQuery代码:

<script type="text/javascript">
$('body').on('click', '.quickview a', function () {
    $('#quickview .modal-header .modal-title').html($(this).attr('title'));
    $('#quickview .modal-body').load($(this).attr('rel') + ' #quickview_product' ,function(result){
        $('#quickview').modal('show');
        $('#quickview .popup-gallery').magnificPopup({
            delegate: 'a',
            type: 'image',
            tLoading: 'Loading image #%curr%...',
            mainClass: 'mfp-img-mobile',
            gallery: {
                enabled: true,
                navigateByImgClick: true,
                preload: [0,1] // Will preload 0 - before current, and 1 after the current image
            },
            image: {
                tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
                titleSrc: function(item) {
                    return item.el.attr('title');
                }
            }
        });
    });
    return false;
});
    setTimeout(function() { $('#notification').modal('hide'); }, 3000);

最佳答案

$('body').on('click', '.quickview a', function () {
    $('#quickview .modal-header .modal-title').html($(this).attr('title'));
    $('#quickview .modal-body').load($(this).attr('rel') + ' #quickview_product' ,function(result){
        $('#quickview').modal('show');
        $('#quickview .popup-gallery').magnificPopup({
            delegate: 'a',
            type: 'image',
            tLoading: 'Loading image #%curr%...',
            mainClass: 'mfp-img-mobile',
            gallery: {
                enabled: true,
                navigateByImgClick: true,
                preload: [0,1] // Will preload 0 - before current, and 1 after the current image
            },
            image: {
                tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
                titleSrc: function(item) {
                    return item.el.attr('title');
                }
            }
        });
    });
    return false;
    setTimeout(function() { $("#notification").hide(); }, 3000);
});