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