在 bootbox bootstrap jquery 插件中添加自定义 Class 到警报对话框

Question

我正在使用 Bootbox jquery plugin 来显示模式。

这是显示警报对话框的简单用法：

bootbox.alert({
     title: 'Message Title',
     message: "this is message Body"
});

此插件有一个 className 选项来添加自定义类以应用于由 dialog() 方法创建的对话框包装器，但我们不能将其用于 alert() 方法.

将自定义类添加到 alert() 的一种方法是使用 dialog() 创建它们。但在这种情况下，每次我们想要一个简单的 Alert 时，我们都必须手动创建按钮，例如 OK（或 Cancel in prompt() 方法）这很耗时，像这样：

bootbox.dialog({
  message: "I am a custom dialog",
  title: "Custom title",
  buttons: {
    success: {
      label: "Success!",
      className: "btn-success",
      callback: function() {
        Example.show("great success");
      }
    }
});

有什么方法可以通过 alert() 方法将自定义类添加到警告框？

Answer 1

好消息！您也可以使用警报设置 className（检查代码段）。

$(window).ready(function(){
  bootbox.alert({
     title: 'Message Title',
     message: "this is message Body",
     className: "my-popup"
  });
});

$(window).ready(function(){
  bootbox.alert({
     title: 'Message Title',
     message: "this is message Body",
     className: "my-popup"
  });
});

.my-popup .modal-content {
  background: #FAEBD7;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<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.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<script src="https://github.com/makeusabrew/bootbox/releases/download/v4.4.0/bootbox.min.js"></script>

在 bootbox bootstrap jquery 插件中添加自定义 Class 到警报对话框

add custom Class to alert dialog in bootbox bootstrap jquery plugin

javascript

jquery

twitter-bootstrap

bootbox