Bootbox http://bootboxjs.com

Bootbox.js is a small JavaScript library which allows you to create programmatic dialog boxes using Bootstrap modals, without having to worry about creating, managing or removing any of the required DOM elements or JS event handlers.

Alert

<button id="bootbox-alert" class="btn btn-warning"><i class="btn-label-icon left fa fa-play"></i>Run</button>

<script>
  $(function() {
    $('#bootbox-alert').on('click', function() {
      bootbox.alert({
        message:   'Hello world!',
        className: 'bootbox-sm',

        callback: function() {
          alert('Hello world callback');
        },
      });
    });
  });
</script>
    Copy

Confirm

<button id="bootbox-confirm" class="btn btn-danger"><i class="btn-label-icon left fa fa-play"></i>Run</button>

<script>
  $(function() {
    $('#bootbox-confirm').on('click', function() {
      bootbox.confirm({
        message:   'Are you sure?',
        className: 'bootbox-sm',

        callback: function(result) {
          alert('Confirm result: ' + result);
        },
      });
    });
  });
</script>
    Copy

Prompt

<button id="bootbox-prompt" class="btn btn-success"><i class="btn-label-icon left fa fa-play"></i>Run</button>

<script>
  $(function() {
    $('#bootbox-prompt').on('click', function() {
      bootbox.prompt({
        title: 'What is your name?',

        callback: function(result) {
          if (result === null) {
            alert('Prompt dismissed');
          } else {
            alert('Hi ' + result + '!');
          }
        },
      });
    });
  });
</script>
    Copy

Custom dialog

<button id="bootbox-custom" class="btn btn-info"><i class="btn-label-icon left fa fa-play"></i>Run</button>

<script>
  $(function() {
    $('#bootbox-custom').on('click', function() {
      bootbox.dialog({
        title:     'Custom title',
        message:   'I am a custom dialog',
        className: 'bootbox-lg',

        buttons: {
          success: {
            label:     'Success!',
            className: 'btn-success',

            callback: function() {
              alert('great success');
            },
          },
          danger: {
            label:     'Danger!',
            className: 'btn-danger',

            callback: function() {
              alert('uh oh, look out!');
            },
          },
          main: {
            label:     'Click ME!',
            className: 'btn-primary',

            callback: function() {
              alert('Primary button');
            },
          }
        },
      });
    });
  });
</script>
    Copy
See the usage documentation at http://bootboxjs.com

Usage

require(['px-libs/bootbox', 'px-bootstrap/modal'], function(bootbox) {
  ...
});
See the documentation at https://github.com/eriktufvesson/ngBootbox

Usage

To use Bootbox plugin, you need to include the next scripts:

<script src="path/to/js/libs/bootbox.js"></script>
<script src="path/to/js/libs/ngBootbox.js"></script>

Then inject the plugin into your angular application:

angular.module('yourApp', ['ngBootbox']);

Alternatively, you can include Bootbox plugin using ocLazyLoad plugin:

$ocLazyLoad.load([
  {
    name: 'ngBootbox',
    files: [
      'path/to/js/libs/bootbox.js',
      'path/to/js/libs/ngBootbox.js',
    ],
  },
]);
SETTINGS
THEMES