Bootbox js：更改确定按钮的位置

Question

在bootbox.js中，默认情况下确定按钮显示在取消按钮之后。我希望它是第一个然后取消。这是当前场景的情况，

http://paynedigital.com/img/confirm-simple.png

我首先需要确定按钮。我有它的文档，但没有找到方法。

Answer 1

您可以通过 CSS 完成。

.modal-footer button {
  float:right;
  margin-left: 10px;
}

这里正在工作fiddlehttp://jsfiddle.net/9L3A9/51/

Answer 2

您可以更改按钮的顺序。尝试：

 bootbox.confirm({
     title: "danger - danger - danger",
     message: "Are you sure of this?",
     buttons: {
        cancel: {
        label: "Cancel",
        className: "btn-default pull-right"
     },
     confirm: {
        label: "Delete",
        className: "btn-danger pull-left"
    }
  },
  callback: function(result) {
    // Do your stuff here
  }
});

希望这对你有用。

Answer 3

我花了一个小时看这个问题，然后我更改了 bootbox.js 文件。

在我添加的按钮枚举之前：

    var list = Object.keys(buttons).map(
    function (key) {
        return buttons[key];
    });

    buttons = list.sort(function (a, b) {
        return b.order -a.order ;
    });

然后您可以为按钮设置顺序。

哎呀！

Answer 4

我更改了 javascript

中的顺序

exports.confirm = function () {
    var options;

    // changed the order of the buttons
    //options = mergeDialogOptions("confirm", ["cancel", "confirm"], ["message", "callback"], arguments);
    options = mergeDialogOptions("confirm", ["confirm", "cancel"], ["message", "callback"], arguments);

Answer 5

我遇到过同样的需要。我已经通过这种方式解决了。我使用 class 来使按钮之间相差 10 像素。

<style>
    .margin-left-10px {
        margin-left: 10px;
    }
</style>

然后我在按钮上使用了bootstrap class，效果很好。

<script>
    buttons: {
            confirm: {
                label: 'Yes',
                className: 'btn-danger'
            },
            cancel: {
                label: 'No',
                className: 'btn-success pull-right  margin-left-10px'
            }
    }
</script>

这里我的no按钮会永远出现在右边

Answer 6

与此同时，Bootbox 团队添加了一个名为 swapButtonOrder 的新选项，您必须将其切换为 true 才能轻松完成。

在此处查看我使用 Bootbox v5 的工作演示：http://jsfiddle.net/dng3z18v/1/

Bootbox js：更改确定按钮的位置

Bootbox js : Change placement of Ok Button

jquery

bootbox

twitter-bootstrap-3