[英]auto open bootstrap modal on page load for 3 times every user
我需要通过加载页面在页面上显示引导模式,我找到了以下代码。 但有两个问题:
1- 我希望该模式为每个用户显示 3 次,而不仅仅是第一次! 朋友们,我该如何解决?
2- 我需要在许多特定页面上显示该模式。 我怎么能控制呢?
我的JS代码:
// A $( document ).ready() block.
$( document ).ready(function() {
if (document.cookie.indexOf('visited=true') == -1){
// load the overlay
$('#myModal').modal({show:true});
var year = 1000*60*60*24*365;
var expires = new Date((new Date()).valueOf() + year);
document.cookie = "visited=true;expires=" + expires.toUTCString();
}
});
我的 HTML 代码:
<!-- Modal -->
<div id="myModal" class="modal fade" 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" style="text-align: center;" >Download on app store</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-lg-12"><img src="" class="img-responsive" /></div>
</div>
<div class="row">
<div class="col-xs-4 col-xs-offset-2"><img src="" class="img-responsive" /></div>
<div class="col-xs-4"><img src="" class="img-responsive" /></div>
</div>
</div>
<!--<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>-->
</div>
</div>
</div>
先谢谢你的帮助
注意:我不熟悉 java 脚本和 jQuery。 你会在答案中正确地制作我的代码吗?
您可以执行以下操作。
// A $( document ).ready() block. $( document ).ready(function() { var count = 0; /*if(localStorage.getItem("modal_count") === null) { } else { count = localStorage.getItem("modal_count"); }*/ count = count+1; //if(count <= 3) { $('#myModal').modal('show'); // localStorage.setItem("modal_count", count); //} });
<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> <!DOCTYPE html> <html> <head> <title></title> </head> <body> <button type="button" id="open_modal"> sample button</button> </body> </html> <!-- Modal --> <div id="myModal" class="modal fade" 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" style="text-align: center;" >Download on app store</h4> </div> <div class="modal-body"> <div class="row"> <div class="col-lg-12"><img src="" class="img-responsive" /></div> </div> <div class="row"> <div class="col-xs-4 col-xs-offset-2"><img src="" class="img-responsive" /></div> <div class="col-xs-4"><img src="" class="img-responsive" /></div> </div> </div> <!--<div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div>--> </div> </div> </div>
几个月后,我自己找到了答案。 所以请检查我的新问题:
如何在 10 秒后通过 javascript 设置 cookie
.
在我的回答(那个问题)中,你可以看到这个问题的解决方案。
谢谢
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.