添加 modal-header 元素到 bootbox 中打开的警告框

Question

为了显示 alert 消息，我使用 bootboxjs.com bootstrap jquery 插件。
调用 bootbox.alert("Hello world!"); 方法后，它生成以下代码并显示模态：

<div id="myModal" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- dialog body -->
      <div class="modal-body">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        Hello world!
      </div>
      <!-- dialog buttons -->
      <div class="modal-footer"><button type="button" class="btn btn-primary">OK</button></div>
    </div>
  </div>
</div>

如您所见，生成的模态框默认没有 modal-header 元素来显示 header 消息。
我希望所有警报框都有一个默认 header 包含自定义消息，例如：System Says :.

我知道 bootboxjs 中有一个 dialog() 方法用于显示可能具有 modal-header 元素的自定义消息。但是使用 dialog() 需要编写并重复一些行来显示一个简单的警告框。

有解决这个问题的方法吗？

Answer 1

使用 options object 指定标题，它将生成您想要的 header：

bootbox.alert({
    title: "I'm the title!",
    message: "I'm the message!",
    callback: function(){ console.log("I handled the callback!"); }
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>

Answer 2

不是直接的答案，但如果有人正在寻找 custom header for bootbox，您可以将 HTML 直接传递给模态的 title 选项。

bootbox.dialog({
  message: 'Your Message',
  title: '<div><h4>Your custom HTML Title</h4></div>'
});

添加 modal-header 元素到 bootbox 中打开的警告框

add modal-header element to opened alert box in bootbox

jquery

twitter-bootstrap

bootbox