Bootstrap模式24小时显示一次弹出窗口

Question

我在SharePoint网站上创建了一个Bootstrap模式弹出框。页面加载时会出现I弹出窗口。我还添加了设置cookie的代码，使弹出窗口只出现一次，但这不起作用。你能解决这个问题吗。以下是我的代码：

<a href="#" type="button" data-toggle="modal" data-target="#myModal"><strong>Read more</strong></a> 
<div class="modal fade" id="myModal" role="dialog" aria-hidden="true" style="display: none;"> 
<div class="modal-dialog" style="width: 1000px;"> 
<div class="modal-content"> 
<div class="modal-body"> 
TEXT HERE!
<div class="modal-footer">
<button class="btn btn-default" type="button" data-dismiss="modal">Close</button></div> 
</div>
</div>
</div> 
</div> 
<script type="text/javascript">
$(window).on('load',function(){
$('#myModal').modal('show');
});
</script>
</script>
<script type="text/javascript">
$(document).ready(function() {
if ($.cookie('pop') == null) {
$('#myModal').modal('show');
$.cookie('pop', '1');
}
});</script>

Answer 1

当用户访问网站时，检查cookie是否已经存在，如果不存在，则创建一个cookie，持续一天--

if (typeof $.cookie('modal_shown') === 'undefined'){ // no cookie
$('#myModal').modal('show');
$.cookie('modal_shown', 'yes', { expires: 1 }); // set cookie expiry to 1 day
} else { // have cookie
// do something
}

还要确保在代码中包含您正在使用的插件。

Answer 2

示例测试演示，您可以尝试一下。

<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script type="text/javascript"
src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js">
</script>
<script type="text/javascript">
$(function () {
console.log($.cookie('pop'));
if (!$.cookie('pop')) {
$('#exampleModalLong').modal('show');
$.cookie('pop', '1');
}
})
</script>