我有以下代码来调用我的简报模式:
$(window).load(function(){
if (sessionStorage.getItem("is_seen") === null) {
setTimeout(function(){
$('#newsletter_modal').modal('show');
sessionStorage.setItem('is_seen', 1);
}, 10000);
}
});
我使用setTimeout
在用户访问网站10秒后调用它,但如果他打开登录模式,10秒后他会看到newsletter
模态,我不想要这样行为。
到目前为止,我试图检查login
模态是否像这样打开:
$(window).load(function(){
if($('#userModal').is(':visible')) {
if (sessionStorage.getItem('is_seen') === null) {
setTimeout(function(){
$('#newsletter_modal').modal('show');
sessionStorage.setItem('is_seen', 1);
}, 10000);
}
}
});
它没有用。另外,我尝试检查#loginModal
是否有in
类,但它也没有用。在这种情况下,我做错了什么?
答案 0 :(得分:2)
声明全局变量,然后影响setTimoutOut
如果用户尝试登录,只需使用clearTimeout js dunction
清除该超时应该是这样的: var timeOut;
$(window).load(function(){
if (sessionStorage.getItem("is_seen") === null) {
timeOut = setTimeout(function(){
$('#newsletter_modal').modal('show');
sessionStorage.setItem('is_seen', 1);
}, 10000);
}
});
点击显示模态登录时
clearTimeout(timeOut)
请参阅下面的代码段
var timeout;
$(window).load(function(){
timeout = setTimeout(function(){
$('#newsletter_modal').modal('show');
}, 5000);
$("#login").click(function(e){
clearTimeout(timeout);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" id="login" data-target="#myModal">login</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">login</h4>
</div>
<div class="modal-body">
<p>Login modal</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="newsletter_modal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">newsletter</h4>
</div>
<div class="modal-body">
<p>Some text in news letter.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
否则,如果您仍想查看css,只需检查登录模式是否有in
classe。
看到bewlo片段
var timeout;
$(window).load(function(){
setTimeout(function(){
if(!$("#loginModal").hasClass('in'))
$('#newsletter_modal').modal('show');
}, 5000);
/*
$("#login").click(function(e){
clearTimeout(timeout);
})*/
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" id="login" data-target="#loginModal">login</button>
<!-- Modal -->
<div class="modal fade" id="loginModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">login</h4>
</div>
<div class="modal-body">
<p>Login modal</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="newsletter_modal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">newsletter</h4>
</div>
<div class="modal-body">
<p>Some text in news letter.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
答案 1 :(得分:1)
您应该从模态中检查显示样式。
$(window).load(function(){
// if($('#userModal').is(':visible')) {
if($('#userModal').css('display') == 'block') {
if (sessionStorage.getItem('is_seen') === null) {
setTimeout(function(){
$('#newsletter_modal').modal('show');
sessionStorage.setItem('is_seen', 1);
}, 10000);
}
}
});
答案 2 :(得分:1)
最简单的方法,检查模态是否有类&#34;打开&#34;或者&#34; opended&#34;,我不确定为显示的模态添加了哪个类:
if ( jQuery('.my_login_modal').hasClass('open') ) {
//remove setTimeout or even remove modal by .hide() to be sure
clearTimeout(timeOut);
}
并将其放入间隔