add custom Class to alert dialog in bootbox bootstrap jquery plugin

Question

I am using Bootbox jquery plugin to show modals.

this is a simple usage of that to show alert dialogs :

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

This plugin has a className option to add custom Classes to apply to the dialog wrapper created by dialog() method but we can not use it for alert() method.

a way to add custom classes to alert() is use dialog() to create those. but in this case we must create buttons like OK (or Cancel inprompt() method) manually every time that we want an simple Alert that is Is time consuming, like this:

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

is there any way to add custom classes to alert boxes via alert() method?

Answer 1

Good news! You can set className also with alert (check the snippet).

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