我创建了一个引导模式弹出窗口,它完美地显示和消失。我需要做的是检查是否存储了cookie,并且当用户在网站上时仅使弹出窗口出现一次。我也有一个关闭按钮。目前,每次我刷新页面时都会显示该页面,但不确定如何使它正常工作。我通过谷歌搜索看到了一些例子,但是对我来说没有用。有人可以帮忙吗?谢谢

这是我的Javascript:

$(document).ready(function () {
    if (document.cookie != "") {
        $("#myModal").modal("show");
        $("#myModalClose").click(function () {
          $("#myModal").modal("hide");
        });
    }
});

这是我的HTML:
<div id="myModal" class="modal fade in">
    <div class="inner-modal">
        <div class="modal-container">
            <p>some text</p>
            <button class="close" data-dismiss="modal" data-target="#myModal">Hide this message</button>
        </div>
    </div>
</div>

最佳答案

您的逻辑有点从头到尾。您需要检查是否尚未设置Cookie,然后显示模式。另外,您需要在以后设置Cookie,以免再次发生。

$(document).ready(function () {
    //if cookie hasn't been set...
    if (document.cookie.indexOf("ModalShown=true")<0) {
        $("#myModal").modal("show");
        //Modal has been shown, now set a cookie so it never comes back
        $("#myModalClose").click(function () {
            $("#myModal").modal("hide");
        });
        document.cookie = "ModalShown=true; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/";
    }
});
<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.2.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

<div id="myModal" class="modal fade in">
    <div class="inner-modal">
        <div class="modal-container">
            <p>some text</p>
            <button id="myModalClose" class="close" data-dismiss="modal" data-target="#myModal">Hide this message</button>
        </div>
    </div>
</div>

10-07 19:10
查看更多