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

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