Bootstrap Snippet Modal with jQuery Cookie using HTML jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!--
Referances 
jQuery Cookie : https://github.com/carhartl/jquery-cookie
Modal : http://getbootstrap.com/javascript/#modals
-->
<script src="http://frontend.reklamor.com/jquery.cookie/jquery.cookie.js"></script>
<div class="container">
    <div class="row">
        <div class='modal fade' id='myModal'>
            <div class='modal-dialog'>
                <div class='modal-content'>
                    <div class='modal-header'>
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 class='modal-title'>
                          <strong>MODAL WITH JQUERY COOKIE</strong>
                        </h4>
                    </div>
                    <!-- / modal-header -->
                    <div class='modal-body'>
                        <img class="img-responsive" src="http://placehold.it/600x350&text=MODAL" />
                    </div>
                    <!-- / modal-body -->
                   <div class='modal-footer'>
                       <div class="checkbox pull-right">
                            <label>
                              <input class='modal-check' name='modal-check' type="checkbox"> Don't Show
                            </label>
                        </div>
                        <!--/ checkbox -->
                  </div>
                  <!--/ modal-footer -->
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$(document).ready(function(){
    //Referances 
    //jQuery Cookie : https://github.com/carhartl/jquery-cookie
    //Modal : http://getbootstrap.com/javascript/#modals
    var my_cookie = $.cookie($('.modal-check').attr('name'));
    if (my_cookie && my_cookie == "true") {
        $(this).prop('checked', my_cookie);
        console.log('checked checkbox');
    }
    else{
        $('#myModal').modal('show');
        console.log('uncheck checkbox');
    }
    $(".modal-check").change(function() {
        $.cookie($(this).attr("name"), $(this).prop('checked'), {
            path: '/',
            expires: 1
        });
    });
});
   
  
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Modal with jQuery Cookie"
Bootstrap 3.1.0 Snippet by phohtoo

Related: See More

Questions / Comments:

"Modal with jQuery Cookie" Bootstrap 3.1.0 Snippet by phohtoo

Related: See More

Questions / Comments:

"Modal with jQuery Cookie"
Bootstrap 3.1.0 Snippet by phohtoo