Bootbox Dialog Modal Bootstrap 4

Question

在我的頁面上，我有一張桌子。 在該表的一個單元格內部是一個鏈接。 如果單擊該鏈接，我正在執行jQuery腳本。 例如，如果單擊鏈接，我想顯示一個Bootstrap對話框。 使用Bootbox.js可以輕松完成此操作。 但是，bootbox不支持Bootstrap 4。

本來，bootbox甚至不會顯示，因為自舉3，類名來展示一些東西是in ，但在引導四是show 。 我已經解決了這個問題，但目前的情況如下。

通過調用bootbox.js生成的HTML是：

<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>

問題是在類是modal-header的div中，按鈕位於h4元素之前。 如果那些被切換，那么這個問題就會解決，但這就是我需要幫助的地方。 我如何通過bootbox語法執行此操作？ 我知道我可以暫時刪除標題，直到bootbox更新為支持bootstrap 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
                    }
                });

Answer 1

您可以通過css解決它：

.bootbox .modal-header{
display: block;
}

Answer 2

它可以修復：

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

Answer 3

要解決此問題，您只需反轉標題和x的位置（在HTML中），如下所示：

 <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 ： closeButton對我來說有點硬編碼。

但是，如果你改變了

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

至：

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

在該文件中，應該修復問題。

編輯：

實際上，還有dialog.find(".modal-title").html(options.title);

因此，您需要將closeButton附加到標題 。 然后它會像預期的那樣工作。

Answer 4

如果人們偶然發現這個，現在有一個版本的bootbox 5支持bootstrap 4.你可以在這里找到它https://www.nuget.org/packages/Bootbox.JS/5.0.0-beta

Answer 5

也許你可以在bootbox回調函數中重新命令dom，如：

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

Answer 6

這是我已經完成的並且它有效：轉到你的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)

因此，您只需將其更改為“追加”，關閉按鈕通常應位於右側。