javascript - Bootbox对话框模态Bootstrap 4

在我的页面上，我有一张桌子。该表的一个单元格内部是一个链接。如果单击该链接，我将执行jQuery脚本。例如，如果单击链接，我想显示一个引导对话框。这可以通过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
                    }
                });

最佳答案

要解决此问题，您只需颠倒标题和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://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附加到标题。然后它将按预期工作。

关于javascript - Bootbox对话框模态Bootstrap 4，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48529880/