jquery – 添加“不再显示此对话框”复选框以引导模式

正如标题所述,我想在我的模态中添加一个复选框,选中后,将阻止弹出模式.我希望每次重新加载页面时都会出现模式,并且用户可以使用该选项使其停止显示.

我的模态：

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

解决方法

尝试注入复选框单击事件并使用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: '/'
        });
    });
});