Question

在我的页面上，我有一张桌子。在该表的一个单元格内部是一个链接。如果单击该链接，我正在执行jQuery脚本。例如，如果单击链接，我想显示一个Bootstrap对话框。这可以通过Bootbox.js轻松完成。但是，bootbox不支持Bootstrap 4更新。

最初，bootbox甚至无法显示，因为在Bootstrap 3中，显示内容的类名是in，但在Bootstrap 4中它是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>

问题是，在div类modal-header中，按钮位于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

如果人们偶然发现了这个问题，那么现在有一个支持Bootstrap 4的Bootbox 5版本。您可以在这里https://www.nuget.org/packages/Bootbox.JS/5.0.0-beta

Answer 4

要解决此问题，您只需反转标题的位置（在HTML中）和x，如下所示：

＆＃13;

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

＆＃13;

在这里搜索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附加到标题。然后它会按预期工作。

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)

所以你只需要改变它＆＃34;追加＆＃34;关闭按钮通常应位于右侧。

Bootbox Dialog Modal Bootstrap 4

6 个答案: