Question

我有一个自定义的PHP脚本，它使用jQuery Dialog来确认diaglog框。

启动对话框的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模式替换它进行serval修改，所以此时它看起来像这样：

(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模态为模态设计和功能提供了很大的灵活性。＆＃34;缺点＆＃34;这就是你必须自己做更多的工作。如果你看一下Bootstrap modal documentation，你会看到，当你正确地调用模态时，它需要一组完全不同于jQuery对话框的选项。首先，您不能将按钮和按钮操作作为选项传递给模态。你可以做的是在HTML中创建你需要的结构，并使用按钮，然后添加javascript来控制他们的动作。这个bootply应该作为你想要的基本框架。

Bootstrap Modal而不是jQuery Dialog

1 个答案: