[英]Bootbox Dialog Modal Bootstrap 4
On my page, I have a table. 在我的页面上,我有一张桌子。 Inside one of the cells of that table is a link. 在该表的一个单元格内部是一个链接。 I am performing jQuery scripts if that link is clicked. 如果单击该链接,我正在执行jQuery脚本。 For instance if the link is clicked I want to show a Bootstrap Dialog. 例如,如果单击链接,我想显示一个Bootstrap对话框。 This can be done easily with Bootbox.js . 使用Bootbox.js可以轻松完成此操作。 However, bootbox is not updated with support of Bootstrap 4. 但是,bootbox不支持Bootstrap 4。
Originally, the bootbox wouldn't even show because in Bootstrap 3, the class name to show something was in
, but in Bootstrap 4 it is show
. 本来,bootbox甚至不会显示,因为自举3,类名来展示一些东西是in
,但在引导四是show
。 I have fixed that, but here is how it looks currently. 我已经解决了这个问题,但目前的情况如下。
The HTML that is generated by calling bootbox.js for this is: 通过调用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>
The problem is that in the div
where the class is modal-header
, the button comes before the h4
element. 问题是在类是modal-header
的div
中,按钮位于h4
元素之前。 If those were switched, then this problem would be solved, but that is what I need help with. 如果那些被切换,那么这个问题就会解决,但这就是我需要帮助的地方。 How would I do that via the bootbox syntax? 我如何通过bootbox语法执行此操作? I know I could just remove the title for now until bootbox becomes updated to support bootstrap 4, but I'm curious if this can be done. 我知道我可以暂时删除标题,直到bootbox更新为支持bootstrap 4,但我很好奇是否可以这样做。
Here is what I have so far: 这是我到目前为止:
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
}
});
You can just resolve it by css: 您可以通过css解决它:
.bootbox .modal-header{
display: block;
}
it can be fixed with: 它可以修复:
.bootbox .modal-header {
flex-direction: row-reverse;
}
To fix this, you just reverse the positions (in the HTML) of the headline and the x
like so: 要解决此问题,您只需反转标题和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>
When searching for closeButton
here: https://raw.githubusercontent.com/makeusabrew/bootbox/master/bootbox.js things do a little bit hard-coded to me. 在这里搜索closeButton
: https : closeButton
对我来说有点硬编码。
However, if you change 但是,如果你改变了
dialog.find(".modal-header").prepend(closeButton);
to: 至:
dialog.find(".modal-header").append(closeButton);
in that file, the problem should be fixed. 在该文件中,应该修复问题。
EDIT: 编辑:
Actually, there's also dialog.find(".modal-title").html(options.title);
实际上,还有dialog.find(".modal-title").html(options.title);
So, you need to append the closeButton
to the title . 因此,您需要将closeButton
附加到标题 。 Then it's gonna work as expected. 然后它会像预期的那样工作。
如果人们偶然发现这个,现在有一个版本的bootbox 5支持bootstrap 4.你可以在这里找到它https://www.nuget.org/packages/Bootbox.JS/5.0.0-beta
Perhaps you can re-order the dom in the bootbox callback function, like: 也许你可以在bootbox回调函数中重新命令dom,如:
bootbox.confirm({
...
callback: function () {
$('.modal-header').prepend('.modal-title');
}
});
here is what i've done and it worked: go to your js file (mine is bootbox.min.js), find this line : 这是我已经完成的并且它有效:转到你的js文件(我的是bootbox.min.js),找到这一行:
var m=b(n.closeButton);a.title?d.find(".modal-header").prepend(m)
and change it for: 并将其更改为:
var m=b(n.closeButton);a.title?d.find(".modal-header").append(m)
So you just need to change it for "append" and the closebutton should normally be on the right side. 因此,您只需将其更改为“追加”,关闭按钮通常应位于右侧。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.