Question

要显示警告消息，我使用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元素来显示标题消息我希望所有警报框都有一个默认标题包含一个自定义消息，如：System Says :。

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

有解决此问题的方法吗？

Answer 1

使用options object指定标题，它会生成您之后的标题：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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中打开的警告框

2 个答案: