添加"不再显示此对话框"复选框以引导模式

Question

正如标题所述，我想在我的模态中添加一个复选框，当选中该复选框时，它将阻止模态弹出。我希望每次重新加载页面时都能出现模态，并为用户提供停止显示的选项。

我的模式：

<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>

和我的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

尝试注入复选框单击事件并使用Cookie存储用户选择。

您需要jQuery cookie插件才能使用$.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: '/'
        });
    });
});