我正在尝试使用 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>
最佳答案
您可以在打开弹出窗口时添加延迟淡出,以便它在延迟后自动淡出。 Working jsfiddle here
$('[data-popup="' + targeted_popup_class + '"]').fadeIn(350).delay(4000).fadeOut(350);
关于javascript - 使用 setTimeout 让弹出窗口自行淡出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35667456/