<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="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.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'> <img src='http://s10.postimg.org/zex8gmjax/reevio_logo.png' border='0' alt='reevio logo'/> </h4> </div> <!-- / modal-header --> <div class='modal-body'> <h3>Welcome</h3> <p>Hello! Welcome to the web’s most advanced design <br>tool that runs right in your browser! </p> <p>If you have a few minutes,<br>take a look at our getting started video to learn the basics:</p> <div class="welcome-video"> <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zmPzbZVUp3g" width="530px" height="300px"></iframe> </div> <p>Lorem ipsum dolor sit amet, affert doctus et nam. <br> An eripuit euismod has, corpora convenire quaerendum quo no,<br> has ut adhuc suavitate. Partem utamur eruditi quo ex. Movet consequat ius cu, pri feugiat <br>repudiandae eu,nemore splendide efficiantur ei mea.</p> <button type="button" class="btn btn-primary">OK,Lets go</button> </div> <!-- / modal-body --> </div> <!-- / modal-content --> </div> <!--/ modal-dialog --> </div> <!-- / modal --> </div> <!-- / row --> </div> <!-- / container -->

.modal-content{ background:#fff; width:850px;height:840px; } .modal-content .modal-body h3{ font-size:16px;text-transform:uppercase; color:#2a3245; text-align:center; font-weight:600; padding-bottom:20px; } .modal-content .modal-body{ width:700px; margin-left:80px; } .modal-content .modal-body p{ font-size:12px; color:#2a3245; text-align:center; font-weight:600; } .modal-content .modal-body .welcome-video{ margin-top:25px; margin-left:10%; margin-bottom:30px; } .modal-content .modal-body .btn-primary{ background:#db0043; border:none: display:block; margin-left:45%; margin-top:40px; } .modal-content .modal-header{ width:700px; border-bottom:1px solid #dfe1e8; margin-left:60px; margin-top:30px; } .modal-content .modal-header img{ margin-left:40%; padding-bottom:10px; }

$(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 }); }); });