it-roy-ru.com

Bootbox Dialog Модальный Bootstrap 4

На моей странице у меня есть таблица. Внутри одной из ячеек этой таблицы есть ссылка. Я выполняю сценарии jQuery, если щелкнуть эту ссылку. Например, если ссылка нажата, я хочу показать диалог начальной загрузки. Это можно легко сделать с помощью Bootbox.js . Тем не менее, bootbox не обновляется с поддержкой Bootstrap 4.

Изначально загрузочная коробка даже не отображалась, потому что в Bootstrap 3 имя класса для отображения чего-то было in, но в Bootstrap 4 это show. Я исправил это, но вот как это выглядит в настоящее время.

 enter image description here

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
                    }
                });
12
M12 Bennett

Чтобы это исправить, вы просто меняете позиции (в HTML) заголовка и x следующим образом: 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<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">
                <h4 class="modal-title">Test Title?</h4>
                <button class="bootbox-close-button close" aria-hidden="true" type="button" data-dismiss="modal">×</button>
            </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>

При поиске closeButton здесь: https://raw.githubusercontent.com/makeusabrew/bootbox/master/bootbox.js вещи немного жестко запрограммированы для меня. 

Однако, если вы измените 

dialog.find(".modal-header").prepend(closeButton); 

чтобы: 

dialog.find(".modal-header").append(closeButton);

в этом файле проблема должна быть исправлена.

Правка:

На самом деле, есть также dialog.find(".modal-title").html(options.title); 

Итак, вам нужно добавить closeButton к заголовку. Тогда это сработает, как и ожидалось.

0
WebDevBooster

Вы можете просто решить это с помощью CSS:

.bootbox .modal-header{
display: block;
}
21
Paweł Rymsza

это можно исправить с помощью:

.bootbox .modal-header {
    flex-direction: row-reverse;
}
3
auri.borealis

Если люди сталкиваются с этим, то теперь есть версия bootbox 5, которая поддерживает начальную загрузку 4. Вы можете найти ее здесь https://www.nuget.org/packages/Bootbox.JS/5.0.0-beta

1
Al Belmondo

Возможно, вы можете переупорядочить dom в функции обратного вызова bootbox, например:

bootbox.confirm({
    ...
    callback: function () {
       $('.modal-header').prepend('.modal-title');                 
    }
});
0
Eliellel

вот что я сделал, и это сработало: Перейдите к вашему файлу js (мой - bootbox.min.js), найдите следующую строку:

var m=b(n.closeButton);a.title?d.find(".modal-header").prepend(m)

и измените его на:

var m=b(n.closeButton);a.title?d.find(".modal-header").append(m)

Так что вам просто нужно изменить его на «добавление», а кнопка закрытия обычно должна быть на правой стороне. 

0
Youssef Harkati