Bootstrap Modal代替jQuery Dialog

Question

我有一个自定义php脚本，该脚本使用jQuery对话框进行确认对话框。

初始化对话框的js如下所示：

    (function ($) {
    $(function () {
        if ($('#frmCreateUser').length > 0) {
            $('#frmCreateUser').validate();
        }
        if ($('#frmUpdateUser').length > 0) {
            $('#frmUpdateUser').validate();
        }

        $("a.icon-delete").live("click", function (e) {
            e.preventDefault();
            $('#record_id').text($(this).attr('rev'));
            $('#dialogDelete').dialog('open');
        });

        if ($("#tabs").length > 0) {
            $("#tabs").tabs({
                select: function(event, ui){
                    $("#message_box").html("");
                    switch(ui.index){
                        case 0:
                            $("#info_list_box").css("display", "block");
                            $("#info_add_box").css("display", "none");
                            break;
                        case 1:
                            $("#info_list_box").css("display", "none");
                            $("#info_add_box").css("display", "block");
                            break;
                    }
                }
            });
        }
        $(".multiselect").multiselect({
            minWidth: 400
        });
        if ($("#dialogDelete").length > 0) {
            $("#dialogDelete").dialog({
                autoOpen: false,
                resizable: false,
                draggable: false,
                height:220,
                modal: true,
                close: function(){
                    $('#record_id').text('');
                },
                buttons: {
                    'Delete': function() {
                        $.ajax({
                            type: "POST",
                            data: {
                                id: $('#record_id').text()
                            },
                            url: "index.php?controller=AdminUsers&action=delete",
                            success: function (res) {
                                $("#content").html(res);
                                $("#tabs").tabs();
                            }
                        });
                        $(this).dialog('close');            
                    },
                    'Cancel': function() {
                        $(this).dialog('close');
                    }
                }
            });
        }
    });
})(jQuery);

我已经完成了服务修改，将其替换为Bootstrap模态，因此，现在看起来像这样：

(function ($) {
    $(function () {
        if ($('#frmCreateUser').length > 0) {
            $('#frmCreateUser').validate();
        }
        if ($('#frmUpdateUser').length > 0) {
            $('#frmUpdateUser').validate();
        }

        $("a.icon-delete").live("click", function (e) {
            e.preventDefault();
            $('#record_id').text($(this).attr('rev'));
            $('#myModal').modal('show');
        });

        if ($("#tabs").length > 0) {
            $("#tabs").tabs({
                select: function(event, ui){
                    $("#message_box").html("");
                    switch(ui.index){
                        case 0:
                            $("#info_list_box").css("display", "block");
                            $("#info_add_box").css("display", "none");
                            break;
                        case 1:
                            $("#info_list_box").css("display", "none");
                            $("#info_add_box").css("display", "block");
                            break;
                    }
                }
            });
        }
        $(".multiselect").multiselect({
            minWidth: 400
        });
        if ($("#myModal").length > 0) {
            $("#myModal").modal({
                autoOpen: false,
                resizable: false,
                draggable: false,
                height:220,
                modal: true,
                close: function(){
                    $('#record_id').text('');
                },
                buttons: {
                    'Delete': function() {
                        $.ajax({
                            type: "POST",
                            data: {
                                id: $('#record_id').text()
                            },
                            url: "index.php?controller=AdminUsers&action=delete",
                            success: function (res) {
                                $("#content").html(res);
                                $("#tabs").tabs();
                            }
                        });
                        $(this).modal('hide');          
                    },
                    'Cancel': function() {
                        $(this).modal('hide');
                    }
                }
            });
        }
    });
})(jQuery);

似乎它有所帮助，并且对话框现在是所需的模态，尽管我的按钮不起作用..我确保按钮具有按钮的作用，但是js并未像在对话框中那样使用我的按钮我非常确定该错误是在上一次使用#myModal ID时出现的错误。

谢谢。

Answer 1

使用Bootstrap模态可以为模态设计和功能提供很大的灵活性。 这样做的“缺点”是您必须自己做更多的工作。 如果您查看Bootstrap 模态文档 ，则会看到，在正确调用模态时，它所采用的选项集与jQuery对话框完全不同。 首先，您不能将按钮和按钮动作作为选项传递给模式。 相反，您可以做的是在适当位置使用按钮在HTML中创建所需的结构，然后添加JavaScript以控制其动作。 该bootply应该作为您想要的基本框架。