2016-01-04 2 views
0

В Bootbox, я не могу изменить цвет кнопки в confiem коробке, пожалуйста, помогите мнеНевозможно изменить цвет кнопки в окно подтверждения в Bootbox

вот мой код:

bootbox.confirm('This action removes all partners from this project and resets all existing stock distribution. <br /> <br /> Do you wish to continue?','Cancel','Remove', function (result) { 
    if (result == true) { 
     //do something 
    } 
}); 

ответ

1

bootbox позволяет добавлять классы к кнопкам. См. Следующий фрагмент для рабочего примера. Поместите любые стили, которые вы хотите в свой файл css, или лучше, но придерживайтесь стандартных цветов бутстрапа для согласованности. В этом примере я использую классы начальной загрузки btn-опасности и btn-default, а также pull-right и pull-left, но вы можете использовать любые классы, которые вы хотите.

Если у вас все еще есть проблемы, возможно, у вас есть несоответствие между bootbox и bootstrap и jquery версии?

bootbox.confirm({ 
 
    message: 'This action removes all partners from this project and resets all existing stock distribution. <br /> <br /> Do you wish to continue?', 
 
    buttons: { 
 
    'cancel': { 
 
     label: 'Cancel', 
 
     className: 'btn-default pull-left' 
 
    }, 
 
    'confirm': { 
 
     label: 'Remove', 
 
     className: 'btn-danger pull-right' 
 
    } 
 
    }, 
 
    callback: function(result) { 
 
    if (result) { 
 
     // whatever you want to do here 
 
     console.log(result) 
 
    } 
 
    } 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
 
<script src="https://github.com/makeusabrew/bootbox/releases/download/v4.4.0/bootbox.min.js"></script>

+0

Привет Митча, Спасибо за ваш ответ. Я попробовал это, я получаю пустой модальный с двумя кнопками удаления и отмены. сообщение не отображается, а также кнопки не меняются. – priya

+0

можете ли вы либо пометить приведенный выше ответ как правильный (он действительно работает в конце концов), либо, по крайней мере, сообщить нам, как еще мы можем помочь? –

+0

Жаль, что он не работает для меня. Я думаю, потому что я использовал bootstrap 2.0 и jquery 1.8, поэтому я использую bootbox v3.3,0. Я не могу обновить bootstrap и jquery из-за конфликтов. Есть ли способ решить мою проблему без обновления версий? – priya

0

вы можете с помощью CSS

<style> 
    .bootbox-confirm div div div button.btn-primary{ 
     background-color: orange 
    } 
</style>