На моей странице у меня есть таблица. Внутри одной из ячеек этой таблицы есть ссылка. Я выполняю сценарии jQuery, если щелкнуть эту ссылку. Например, если ссылка нажата, я хочу показать диалог начальной загрузки. Это легко сделать с помощью Bootbox.js. Тем не менее, bootbox не обновляется с поддержкой Bootstrap 4.
Первоначально bootbox даже не показывать, потому что в Bootstrap 3, имя класса, чтобы показать что - то было in
, но в Bootstrap 4 это show
. Я исправил это, но вот как это выглядит в настоящее время.
HTML-код, сгенерированный для этого путем вызова bootbox.js:
<div tabindex="-1" class="bootbox modal fade show in" role="dialog" style="display: block;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="bootbox-close-button close" aria-hidden="true" type="button" data-dismiss="modal">×</button>
<h4 class="modal-title">Test Title?</h4>
</div>
<div class="modal-body">
<div class="bootbox-body">Test Message</div>
</div>
<div class="modal-footer">
<button class="btn btn-default" type="button" data-bb-handler="cancel"><i class="fa fa-times"></i> Cancel</button>
<button class="btn btn-primary" type="button" data-bb-handler="confirm"><i class="fa fa-check"></i> Confirm</button>
</div>
</div>
</div>
</div>
Проблема в том, что в элементе div
где класс является modal-header
, кнопка идет перед элементом h4
. Если бы они были переключены, то эта проблема была бы решена, но это то, что мне нужно помочь. Как бы я сделал это с помощью синтаксиса bootbox? Я знаю, что пока могу просто удалить заголовок, пока не обновится bootbox для поддержки начальной загрузки 4, но мне интересно, можно ли это сделать.
Вот что у меня так далеко:
bootbox.confirm({
className: "show", // where I had to manually add the class name
title: "Test Title?",
message: "Test Message",
buttons: {
cancel: {
label: "<i class='fa fa-times'></i> Cancel"
},
confirm: {
label: "<i class='fa fa-check'></i> Confirm"
}
},
callback: function (result) {
// my callback function
}
});