How can i show the modal in the twitter bootstrap just once?

Question

this is my code now:

<script type="text/javascript">
        $(document).ready(function() {

            if($.cookie('msg') == 0)
            {
                $('#myModal').modal('show');
                $.cookie('msg', 1);
            }

        });
</script>

on page load the model shows but when i refresh it keeps showing which it should only show once. the $.cookie is from https://github.com/carhartl/jquery-cookie

update:

this worked: the 'hide' didnt work for some reason

<script type="text/javascript">
        $(document).ready(function() {
            if($.cookie('msg') == null)
            {
                $('#myModal').modal('show');
                $.cookie('msg', 'str');
            }
            else
            {
                $("div#myModal.modal").css('display','none');
            }


        });

</script>

yes, i set $.cookie('msg') != 'hide') ... then show modal then after that i set the msg cookie to a value of hide. then the modal keeps showing after refresh — Exploit, Jun 14 '12 at 03:18
Check if my solution worked. If not, can you make a jsfiddle? — Phu, Jun 14 '12 at 03:20
your solution didnt work but what i tried is setting modal to 'hide' rather than show and saw that it didnt work either. not sure why. so what i just did is checked to see if the cookie was set and if it was manually hide with css otherwise display it. and that worked. — Exploit, Jun 14 '12 at 03:34

score 6 · Accepted Answer · answered Dec 13 '12 at 17:19

@SarmenB 's Update worked in most browsers (FF, IE9) but not IE8.

I modified his updated solution to get it to work in IE8...

This was @SarmenB 's solution:

<script type="text/javascript">
    $(document).ready(function() {
        if($.cookie('msg') == null)
        {
            $('#myModal').modal('show');
            $.cookie('msg', 'str');
        }
        else
        {
            $("div#myModal.modal").css('display','none');
        }
    });
</script>

This is the modified solution I came up with that works is IE8 as well:

<script type="text/javascript">
    $(document).ready(function() {
        if($.cookie('msg') != null && $.cookie('msg') != "")
        {
            $("div#myModal.modal, .modal-backdrop").hide();
        }
        else
        {
            $('#myModal').modal('show');
            $.cookie('msg', 'str');
        }
    });
</script>

Basicaly to get it to work in IE8 I had to reverse what was in the if/else statements.

score 0 · Answer 2 · answered Jun 14 '12 at 03:19

From the looks of the library, the value should be a string. Try:

<script type="text/javascript">
        $(document).ready(function() {

            if($.cookie('msg') == null)
            {
                $('#myModal').modal('show');
                $.cookie('msg', '1');
            }

        });
</script>

How can i show the modal in the twitter bootstrap just once?

2 Answers2

Linked