使用setTimeout自动弹出fadeOut

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

＆＃13;

＆＃13;

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

＆＃13;

/* 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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;