使用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>