如何在3秒內自動隱藏彈出窗口。

Question

我需要在點擊按鈕的同時顯示3秒的彈出窗口，然後彈出窗口會在3秒後自動隱藏。
只有在第一次點擊按鈕後，彈出窗口才能隱藏。
請幫助我如何做到這一點。

謝謝。

<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); 

Answer 1

$('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); 
});