Restricting bootstrap modal

Question

I am using bootstrap modal to showcase my special offers on my site. But this modal pops up, every time the page gets refreshed. How do I restrict this modal to appear only once?

<!-- Modal start-->
<div class="container">
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">/* header part */
<button type="button" class="close" data-dismiss="modal">&times;</button>
</div>
<div class="modal-body">/* Body part */
Some text
</div>
        </div>
        <div class="modal-footer">/* Footer part */

            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>  
</div>` This is the code used for the modal. What change do i need to make to make the modal pop up just once , rather than appearing on every page refresh??`
</div>  
<script>
$(document).ready(function(){
    $("#myModal").modal();
});
</script>

use a cookie and store, is the popup has showed. check the cookie. — vaso123, Jul 08 '16 at 11:18
By default the document ready function is called every time when a page gets load, that's why the modal pops up every time when the page is refreshed. — Dibakar Paul, Jul 08 '16 at 11:20

score 2 · Answer 1 · answered Jul 08 '16 at 11:19

Just remove this:

<script>
$(document).ready(function(){
    $("#myModal").modal();
});
</script>

How you can toggle (hide/show) the modal:

$('#myModal').modal('show')
$('#myModal').modal('toggle')
$('#myModal').modal('hide')

Docs:

http://getbootstrap.com/javascript/#modals

If you want that the Modal only once appear i suggest jquery-cookies:

https://plugins.jquery.com/cookie/

Really simple to use:

<script>
$(document).ready(function(){

    if( !$.cookie('customer.offers.seen') {
       $("#myModal").modal();
       $.cookie('customer.offers.seen', true);
    }

});
</script>

score 1 · Answer 2 · answered Jul 08 '16 at 11:27

You could use the HTML5 sessionStorage which stores the data for only one session. Basically it lives with the browser tab. If the user refresh it still there but if they close the tab its removed.

<script>
    $(document).ready(function(){
        if (sessionStorage.getItem("loaded") === null) {
          sessionStorage.setItem("loaded", "loaded");
          $("#myModal").modal();
        }
    });
</script>

score 0 · Answer 3 · answered Jul 08 '16 at 11:23

By using cookie try the following

<script>
$(document).ready(function(){
    $("#myModal").modal();
});
</script>

into

<script>
$(document).ready(function(){
    var pop_up_show = $.cookie("pop_up_show"); 
    if(typeof pop_up_show != "undefined" && pop_up_show == "1"){

    }else{
        $.cookie("pop_up_show", "1");
        $("#myModal").modal();      
    }

});
</script>

Restricting bootstrap modal

3 Answers3