Add a “Don't show this dialog again” checkbox to bootstrap modal

Question

As the title states, I'd like to add a checkbox to my modal that, when selected, will stop the modal from popping up. I'd like for the modal to come up every time the page is reloaded, with the option available to the user to make it stop 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 injecting the checkbox click event and use a Cookie to store user selection.

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: '/'
        });
    });
});