使用setTimeout自行獲取彈出窗口以淡入淡出

Question

我試圖讓一個彈出窗口關閉一個setTimeout函數，而不必用關閉按鈕關閉它。一旦彈出窗口出現，我想要啓動超時時間。

我試圖做到（註釋掉的代碼），它只是殺死腳本。

我在做什麼錯？

取而代之的是點擊功能，我可以用什麼來使這個彈出窗口顯示ajax調用的成功？

$(function() { 
 
    //----- OPEN 
 
    $('[data-popup-open]').on('click', function(e) { 
 
     var targeted_popup_class = jQuery(this).attr('data-popup-open'); 
 
     $('[data-popup="' + targeted_popup_class + '"]').fadeIn(350); 
 
    
 
     e.preventDefault(); 
 
    }); 
 
    
 
    //----- CLOSE 
 
     
 
    $('[data-popup-close]').on('click', function(e) { 
 
     var targeted_popup_class = jQuery(this).attr('data-popup-close'); 
 
     $('[data-popup="' + targeted_popup_class + '"]').fadeOut(350); 
 
    
 
     e.preventDefault(); 
 
    }); 
 
}); 
 
    
 
    
 
/* setTimeout(function() { 
 
('.newsletter-popup').hide();,4000); 
 
});*/

/* Outer */ 
 
.newsletter-popup { 
 
    width:100%; 
 
    height:100%; 
 
    display:none; 
 
    position:fixed; 
 
    top:0px; 
 
    left:0px; 
 
    background:rgba(0,0,0,0.75); 
 
} 
 
    
 
/* Inner */ 
 
.popup-inner { 
 
    max-width:700px; 
 
    width:90%; 
 
    padding:40px; 
 
    position:absolute; 
 
    top:50%; 
 
    left:50%; 
 
    -webkit-transform:translate(-50%, -50%); 
 
    transform:translate(-50%, -50%); 
 
    box-shadow:0px 2px 6px rgba(0,0,0,1); 
 
    border-radius:3px; 
 
    background:#fff; 
 
} 
 
    
 
/* Close Button */ 
 
.popup-close { 
 
    width:30px; 
 
    height:30px; 
 
    padding-top:4px; 
 
    display:inline-block; 
 
    position:absolute; 
 
    top:0px; 
 
    right:0px; 
 
    transition:ease 0.25s all; 
 
    -webkit-transform:translate(50%, -50%); 
 
    transform:translate(50%, -50%); 
 
    border-radius:1000px; 
 
    background:rgba(0,0,0,0.8); 
 
    font-family:Arial, Sans-Serif; 
 
    font-size:20px; 
 
    text-align:center; 
 
    line-height:100%; 
 
    color:#fff; 
 
    text-decoration:none; 
 
} 
 
    
 
.popup-close:hover { 
 
    -webkit-transform:translate(50%, -50%) rotate(180deg); 
 
    transform:translate(50%, -50%) rotate(180deg); 
 
    background:rgba(0,0,0,1); 
 
    text-decoration:none; 
 
} 
 
#popup-inner-content { 
 
    text-align: center; 
 
    font-size: 2em; 
 
    color: #2a2a2a; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<a class="btn" data-popup-open="popup-1" href="#">Open Popup #1</a> 
 
    
 
<div class="newsletter-popup" data-popup="popup-1"> 
 
    <div class="popup-inner"> 
 
     <div id="popup-inner-content">Thanks for subscribing to our newsletter!</div> 
 
     <!-- <p><a data-popup-close="popup-1" href="#">Close</a></p> --> 
 
     <a class="popup-close" data-popup-close="popup-1" href="#">x</a> 
 
    </div> 
 
</div>

Answer 1

您可以添加當您打開您的彈出，使其延遲一段時間後自動淡出延遲淡出。 Working jsfiddle here

$('[data-popup="' + targeted_popup_class + '"]').fadeIn(350).delay(4000).fadeOut(350); 

Answer 2

您的setTimeout函數的一些錯誤。

它應該是這樣的：

setTimeout(function(){ 
$('.newsletter-popup').hide(); 
}, 4000); 

Answer 3

$(function() { 
 
    //----- OPEN 
 
    $('[data-popup-open]').on('click', function(e) { 
 
     var targeted_popup_class = jQuery(this).attr('data-popup-open'); 
 
     $('[data-popup="' + targeted_popup_class + '"]').fadeIn(350); 
 
setTimeout(function(){ 
 
$('.newsletter-popup').fadeOut(); 
 
}, 2000); 
 
     e.preventDefault(); 
 
    }); 
 
    
 
    //----- CLOSE 
 
     
 
    $('[data-popup-close]').on('click', function(e) { 
 
     var targeted_popup_class = jQuery(this).attr('data-popup-close'); 
 
     $('[data-popup="' + targeted_popup_class + '"]').fadeOut(); 
 
    
 
     e.preventDefault(); 
 
    }); 
 
});

/* Outer */ 
 
.newsletter-popup { 
 
    width:100%; 
 
    height:100%; 
 
    display:none; 
 
    position:fixed; 
 
    top:0px; 
 
    left:0px; 
 
    background:rgba(0,0,0,0.75); 
 
} 
 
    
 
/* Inner */ 
 
.popup-inner { 
 
    max-width:700px; 
 
    width:90%; 
 
    padding:40px; 
 
    position:absolute; 
 
    top:50%; 
 
    left:50%; 
 
    -webkit-transform:translate(-50%, -50%); 
 
    transform:translate(-50%, -50%); 
 
    box-shadow:0px 2px 6px rgba(0,0,0,1); 
 
    border-radius:3px; 
 
    background:#fff; 
 
} 
 
    
 
/* Close Button */ 
 
.popup-close { 
 
    width:30px; 
 
    height:30px; 
 
    padding-top:4px; 
 
    display:inline-block; 
 
    position:absolute; 
 
    top:0px; 
 
    right:0px; 
 
    transition:ease 0.25s all; 
 
    -webkit-transform:translate(50%, -50%); 
 
    transform:translate(50%, -50%); 
 
    border-radius:1000px; 
 
    background:rgba(0,0,0,0.8); 
 
    font-family:Arial, Sans-Serif; 
 
    font-size:20px; 
 
    text-align:center; 
 
    line-height:100%; 
 
    color:#fff; 
 
    text-decoration:none; 
 
} 
 
    
 
.popup-close:hover { 
 
    -webkit-transform:translate(50%, -50%) rotate(180deg); 
 
    transform:translate(50%, -50%) rotate(180deg); 
 
    background:rgba(0,0,0,1); 
 
    text-decoration:none; 
 
} 
 
#popup-inner-content { 
 
    text-align: center; 
 
    font-size: 2em; 
 
    color: #2a2a2a; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 
<a class="btn" data-popup-open="popup-1" href="#">Open Popup #1</a> 
 
    
 
<div class="newsletter-popup" data-popup="popup-1"> 
 
    <div class="popup-inner"> 
 
     <div id="popup-inner-content">Thanks for subscribing to our newsletter!</div> 
 
     <!-- <p><a data-popup-close="popup-1" href="#">Close</a></p> --> 
 
     <a class="popup-close" data-popup-close="popup-1" href="#">x</a> 
 
    </div> 
 
</div>