javascript - 使用 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);