Bootbox Dialog Modal Bootstrap 4

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

要解决此问题，您只需反转标题等的位置（在 HTML 中）x即可：

\n\n

\r\n

\r\n

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">\r\n<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">\r\n\r\n<div tabindex="-1" class="bootbox modal fade show in" role="dialog" style="display: block;">\r\n    <div class="modal-dialog">\r\n        <div class="modal-content">\r\n            <div class="modal-header">\r\n                <h4 class="modal-title">Test Title?</h4>\r\n                <button class="bootbox-close-button close" aria-hidden="true" type="button" data-dismiss="modal">\xc3\x97</button>\r\n            </div>\r\n            <div class="modal-body">\r\n                <div class="bootbox-body">Test Message</div>\r\n            </div>\r\n            <div class="modal-footer">\r\n                <button class="btn btn-default" type="button" data-bb-handler="cancel"><i class="fa fa-times"></i> Cancel</button>\r\n                <button class="btn btn-primary" type="button" data-bb-handler="confirm"><i class="fa fa-check"></i> Confirm</button>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>

\r\n

\r\n

\r\n

\n\n

当在这里搜索时closeButton： https: //raw.githubusercontent.com/makeusabrew/bootbox/master/bootbox.js事情对我来说有点硬编码。

\n\n

但是，如果你改变

\n\n

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

\n\n

到：

\n\n

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

\n\n

在该文件中，问题应该得到解决。

\n\n

编辑：

\n\n

其实还有dialog.find(".modal-title").html(options.title);

\n\n

因此，您需要将附加closeButton到标题后。然后它就会按预期工作。

\n