javascript - Bootstrap modal and cookie - Stack Overflow

admin管理员组

文章数量:1237480

I have created a bootstrap modal popup and it appears and disappears perfectly. What I need to do is check to see if there is a cookie stored and only have the popup appear once while the user is on the site. I have a close button on it too. At the moment it appears every time I refresh the page and I'm not sure how to get it to work. I have seen a couple of examples by googling but nothing works for me. Can anyone help? Thanks

Here is my Javascript:

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

Here is my 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>

I have created a bootstrap modal popup and it appears and disappears perfectly. What I need to do is check to see if there is a cookie stored and only have the popup appear once while the user is on the site. I have a close button on it too. At the moment it appears every time I refresh the page and I'm not sure how to get it to work. I have seen a couple of examples by googling but nothing works for me. Can anyone help? Thanks

Here is my Javascript:

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

Here is my 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>

• javascript
• jquery
• twitter-bootstrap
• cookies
• popup

Share Improve this question Follow edited Jun 9, 2015 at 10:23 UiUx 99522 gold badges1414 silver badges2525 bronze badges asked Oct 29, 2014 at 12:28 fnkfnk 29122 gold badges44 silver badges1616 bronze badges 4

• Shouldn't if (document.cookie != "") be if (document.cookie == "")? – DavidG Commented Oct 29, 2014 at 12:33
• Hi @DavidG When I change it from != to == my modal popup breaks. – fnk Commented Oct 29, 2014 at 12:37
• Breaks in what way? It's probably better anyway to write if (!document.cookie) – DavidG Commented Oct 29, 2014 at 12:38
• In the sense that the modal popup is displayed on screen all the time, the content behind it isn't greyed out like it should be and the close button doesn't work. – fnk Commented Oct 29, 2014 at 12:45

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 14

Your logic is a bit back to front. You need to check if no cookie has yet been set then show the modal. Also you need to set the cookie afterwards so it doesn't happen again.

$(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 es 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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn./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>

本文标签： javascriptBootstrap modal and cookieStack Overflow