Add the "Do not show this dialog again" checkbox to load the modal

Question

As the title says, I would like to add a flag to my module that, when selected, will stop the appearance of the modal code. I would like the modal function to occur every time the page is reloaded, with the possibility available to the user so that it stops appearing.

My modal:

<div id="myModal" class="modal hide fade"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h3>Modal header</h3> </div> <div class="modal-body"> <div id="modalText"></div> </div> <div class="modal-footer"> <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> <button class="btn btn-primary">Save changes</button> </div> </div> 

and my js:

 <script type="text/javascript"> $(document).ready(function () { $('.redBox').draggable(); $('.blueBox').droppable({ drop: function (event, ui) { var draggable = ui.draggable; var droppable = $(this).attr('id'); $(this) $('.modal-body #modalText').append("Assign " + draggable.attr('id').substring(1, 23) + " to " + droppable + "?"); $("#myModal").modal('show'); } }); }); </script> 

Answer 1

Try entering a checkmark click event and use a cookie to store user preferences.

You will need the jQuery cookie plugin to use $ .cookie.

https://github.com/carhartl/jquery-cookie

HTML:

 <div id="myModal" class="modal hide fade"> [...] <div class="modal-footer"> <label><input type="checkbox" name="dismiss">Don't show again!</label><br /> <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> <button class="btn btn-primary">Save changes</button> </div> </div> 

JS:

 $(document).ready(function () { $('.redBox').draggable(); $('.blueBox').droppable({ drop: function (event, ui) { var draggable = ui.draggable; var droppable = $(this).attr('id'); //$(this) this is not used //check if cookie is set and value is 1 if(!$.cookie('modal_dismiss')) { //moved modal stuff in if case $('.modal-body #modalText').append("Assign " + draggable.attr('id').substring(1, 23) + " to " + droppable + "?"); $("#myModal").modal('show'); } } }); //use modal hidden event for checking checkbox status $('#myModal').on('hidden', function () { var status = $("input[name=dismiss]", this).is(":checked"); $.cookie('modal_dismiss', status, { expires: 7, path: '/' }); }); });