第一页加载时的引导模式答案

【问题标题】：Bootstrap modal at first page load第一页加载时的引导模式
【发布时间】：2016-04-03 15:23:27
【问题描述】：

在页面加载时，我向用户展示了一些引导模式窗口，以向他展示一些信息。我想只在第一次展示这个引导模式，然后每一个都不应该。如何做到这一点？第一次后是否有类似功能禁用的东西？这是我的简单代码：

$(window).load(function () {
            $('#dddd').modal('show')
    });

【问题讨论】：

您可以在显示模态后在 localStorage 中存储一个标志，并且仅在尚未设置该标志时才显示它
可以使用在第一次访问时设置为 true 的 cookie 或会话，然后每次加载都会检查该 cookie 是否存在。
这两个都是好主意，请记住，用户可以清除他们的 cookie / localstorage，然后他们会再次看到模态

标签： javascript jquery twitter-bootstrap

【解决方案1】：

这可能与 this 重复

不过，您可以使用 cookie 来实现这一点。供您参考以下示例是使用 jquery cookie 完成的

<script src="/path/to/jquery.cookie.js"></script>
<script>
    $(document).ready(function() {
        if ($.cookie(‘pop’) == null) {
            $(‘#dddd’).modal(‘show’);
            $.cookie(‘pop’, ’7');
        }
    });
</script>

【讨论】：

【解决方案2】：

将此添加到您的 js 文件中：

if(window.sessionStorage.fist_load_modal1 === undefined){
    $('.first_load_modal').modal('show')
    window.sessionStorage.fist_load_modal1 = true
}

现在您可以使用“first_load_modal”类在第一次加载时显示您的模态。

<div class="modal fade first_load_modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
         CONTENT HERE
        </div>
    </div>
</div>

Obs：在 bootstrap 4 中测试

【讨论】：