Total Pageviews

2017/11/10

[Bootbox] How to change default button and button color in confirmation dialog?

Problem
The confirmation dialog looks like:

I would like to change the default button in confirmation dialog from "確認"(confirm) to "取消"(cancel). 
Owing to confirm to do delete is a dangerous action, so I would like to change it color to red.

How to meet the two requirements?


The original code snippet is as following:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
    $scope.remove = function() {
        bootbox.confirm({
            message:'是否確定要刪除', 
            buttons: {
                confirm: { label: '確認' },
                cancel:  { label: '取消' }
            },
            callback:function(isConfirmed) {
                if(isConfirmed) {
                    // ....
                }
            }
        });
    };



How-to
Add btn-danger class name to confirm button, then the button color will change to red.
Add btn-primary class to cancel button, then the default button will be cancel button.

The updated code snippet is as bellows:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
    $scope.remove = function() {
        bootbox.confirm({
            message:'是否確定要刪除', 
            buttons: {
                confirm: { label: '確認', className: 'btn-danger' },
                cancel:  { label: '取消', className: 'btn-primary' }
            },
            callback:function(isConfirmed) {
                if(isConfirmed) {
                    // ....
                }
            }
        });
    };

Updated screenshot:


No comments: