Boostrap Modal with Cookies

1. Paste this code to the head of your page.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link rel="stylesheet" href="bootstrapcustom/css/bootstrap.min.css">

2. Paste this code to the footer of your page.

<script src="bootstrapcustom/js/bootstrap.min.js"></script>
<script src="bootstrapcustom/js/jquery.cookie.js"></script>
<script>
$('#modal-button').attr('data-toggle', 'modal');
$('#modal-button').attr('data-target', '#important-msg');
</script>
<script>

$( document ).ready(function() {

//Check to see if the cookie exists for the Don't show again option
if (!$.cookie('focusmsg')) {
//Launch the modal when you first visit the site
$('#important-msg').modal('show');
}

//Don't show again mouse click
$("#dont-show-again").click( function() {

//Create a cookie that lasts 14 days
$.cookie('focusmsg', '1', { expires: 14 });
$('#important-msg').modal('hide');

});
});
</script>

3. Download this file and unzip it.

Download and unzip this file. bootstrapcustom.zip. Now add the entire folder the way it is to your project folder using the Add Resources tool.

4. Add an HTML Element nd paste this into it.

<div class="modal fade" id="important-msg" role="dialog" tabindex="-1" aria-labelledby="important-msg-label" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×Close</button>
<h4 class="modal-title" id="important-msg-label">Message Title!</h4>
</div>
<div class="modal-body">
<p>Message text</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" id="dont-show-again">Don't Show Again</button>
</div>
</div>
</div>
</div>

5. Add a button to your page.

Give your button an ID of modal-button and an href of #important-msg

Show Modal