Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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>
like image 224
Exploit Avatar asked Jun 14 '12 03:06

Exploit


People also ask

How do I toggle a Bootstrap modal?

To trigger the modal window, you need to use a button or a link. Then include the two data-* attributes: data-toggle="modal" opens the modal window. data-target="#myModal" points to the id of the modal.

How do you auto pop up modal?

Answer: Use the Bootstrap . modal('show') method modal('show') method for launching the modal window automatically when page load without clicking anything. A common example of this technique is loading the modal when user landed on the home page and requesting them to subscribe the website newsletter.

How do I show Bootstrap modal pop in center of screen?

Answer: Use the CSS margin-top Property This solution will dynamically adjust the alignment of the modal and always keep it in the center of the page even if the user resizes the browser window.


1 Answers

@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.

like image 194
Colin Oakes Avatar answered Sep 23 '22 08:09

Colin Oakes