Question

我正在使用bootstrap模式在我的网站上展示我的特别优惠。但每次刷新页面时，都会弹出此模式。如何限制此模式仅出现一次？

<!-- Modal start-->
<div class="container">
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">/* header part */
<button type="button" class="close" data-dismiss="modal">&times;</button>
</div>
<div class="modal-body">/* Body part */
Some text
</div>
        </div>
        <div class="modal-footer">/* Footer part */

            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>  
</div>` This is the code used for the modal. What change do i need to make to make the modal pop up just once , rather than appearing on every page refresh??`
</div>  
<script>
$(document).ready(function(){
    $("#myModal").modal();
});
</script>

Answer 1

只需删除此内容：

<script>
$(document).ready(function(){
    $("#myModal").modal();
});
</script>

如何切换（隐藏/显示）模式：

$('#myModal').modal('show')
$('#myModal').modal('toggle')
$('#myModal').modal('hide')

<强>文档：

http://getbootstrap.com/javascript/#modals

如果您希望Modal只出现一次，我建议使用jquery-cookies：

https://plugins.jquery.com/cookie/

使用起来非常简单：

<script>
$(document).ready(function(){

    if( !$.cookie('customer.offers.seen') {
       $("#myModal").modal();
       $.cookie('customer.offers.seen', true);
    }

});
</script>

Answer 2

您可以使用HTML5 sessionStorage ，它仅存储一个会话的数据。基本上它与浏览器选项卡一起使用。如果用户仍然在那里刷新它，但如果他们关闭了它被删除的标签。

$("myDiv1")

Answer 3

使用 Cookie 尝试以下

<script>
$(document).ready(function(){
    $("#myModal").modal();
});
</script>

到

<script>
$(document).ready(function(){
    var pop_up_show = $.cookie("pop_up_show"); 
    if(typeof pop_up_show != "undefined" && pop_up_show == "1"){

    }else{
        $.cookie("pop_up_show", "1");
        $("#myModal").modal();      
    }

});
</script>

限制bootstrap模式

3 个答案: