logo标签列表

Bootbox对话框模态窗口Bootstrap 4

javascriptjqueryhtmlcssbootstrap-4
13
在我的页面上，我有一个表格。其中一个单元格内有一个链接。如果点击该链接，我将执行jQuery脚本。例如，如果单击链接，我想显示一个Bootstrap对话框。这可以使用Bootbox.js轻松完成。但是，bootbox没有更新以支持Bootstrap 4。
最初，bootbox甚至不会显示，因为在Bootstrap 3中，显示某些内容的类名为in，但在Bootstrap 4中为show。我已经修复了这个问题，但这是当前的情况。

enter image description here

调用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的
中，按钮出现在

元素之前。如果这些被交换了，那么问题就解决了，但这就是我需要帮助的地方。我该如何通过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
                    }
                });

我认为，这段代码可能会对你有所帮助， .bootbox-close-button { position: absolute; right: 1rem; top: 1rem; }你可以通过将这个CSS添加到你的项目中来进行排列。 - vaj90
6个回答
22

你可以通过CSS来解决它：

.bootbox .modal-header{
display: block;
}
1
这比修改bootbox.min.js要好得多。 - daisy
4

可以通过以下方式解决：

.bootbox .modal-header {
    flex-direction: row-reverse;
}
1
1
要解决这个问题，你只需将标题和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 添加到标题中。然后它就会按预期工作。
1
我无法在HTML中完成这个任务，因为bootbox对话框是通过jQuery生成的。 - Grizzly
实际上，还有dialog.find(".modal-title").html(options.title);所以，你需要将closeButton附加到标题中。然后它就会按预期工作。 - WebDevBooster
1
很高兴听到这个消息。 - WebDevBooster
但是如果我需要再次发布呢？我只需忘记发布，将本地版本复制并粘贴到服务器版本中吗？ - Grizzly
我不知道你在“发布”时做了什么，也不知道你的发布流程是什么。但是，在那个发布过程中可能会导致问题的原因。 - WebDevBooster
显示剩余13条评论
0

这是我所做的，它起作用了： 进入您的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)

所以你只需要将它改为“append”，关闭按钮应该通常在右边。
0

也许您可以在bootbox回调函数中重新排序DOM，例如：

bootbox.confirm({
    ...
    callback: function () {
       $('.modal-header').prepend('.modal-title');                 
    }
});
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接