A Native JavaScript Wrapper for Simple Bootstrap 5 Modals | Modbox


bootstrap modbox is a native JavaScript wrapper for simple bootstrap 5 modals. It provides support for alert, confirmation, and instant conditions, as well as advanced custom dialogs.

bootstrap 5 modal example, bootstrap modal example, bootstrap 4 modal popup, bootstrap modal popup, bootstrap modal width


  • Info/Success/Danger/Error alerts.
  • Confirmation dialog boxes.
  • Prompt popups.
  • Supports Promise API.
  • Asynchronous content download.

How to make use of it:

1. Install Modbox and import it into your Bootstrap 5 project.

$ npm i bootstrap-modbox
// From CDN
<script src="https://unpkg.com/bootstrap-modbox"></script>

// From Local
<script src="./dist/bootstrap-modbox.min.js"></script>

// As a module
import modbox from './dist/bootstrap-modbox.esm.min.js';

2. Create alert dialogs.

// basic
modbox.alert('Alert Message');

// or
  body: 'Alert Message'

// Promise
  body: 'Alert Message'
.then(() => console.log('Alert resolved'));

// variants
  // options

  // options

  // options

  // options

3. Create a confirmation dialog.

  body: 'Confirm Message',
  okButton: {
    label: 'Yes',
    size: 'lg'
  closeButton: {
    label: 'No',
    size: 'sm'
.then(() => console.log('okButton clicked'))
.catch(() => console.log('okButton not clicked'));

4. Create a prompt dialog.

  body: 'Prompt Dialog',
  input: {
    required: true,
    pattern: /\d+/, // input validation
.then(response => console.log(response));

5. Create a custom popup box using the modbox method.

const myModal = new modbox({
  id: 'myModal',
  style: 'primary',
  title: 'My Custom Modal',
  body: 'Details about that thing you were meant to be doing all day.',
  justifyButtons: 'between',
  destroyOnClose: true,
  buttons: [
    { label: 'Button 1', style: 'primary' },
    '<button type="button" class="btn btn-dark" data-bs-dismiss="modal">Button 2</button>'
  events: {
    shown: () => console.log('modal shown')
myModal.addButton({ label: 'Button 3', style: 'danger' }, true);
myModal.addEvent('hidden', () => console.log('modal hidden'));

6. Complete options.

// custom icon class
icon: null,

// color based on Bootstrap utility classes
style: 'white',

// title text color
titleStyle: null,

// dialog title
title: 'Information',

// dialog content
body: '',

// sm, lg, ...
size: null,

// center the popup box
center: false,

// enable fade animation
fade: true,

// show the popup box on page load
show: false,

// set the relatedTarget property on the event object passed to show and shown event callback functions. 
// can be overridden by passing in an element when calling the .show() method.
relatedTarget: undefined,

// is scrollable
scrollable: true,

// destroy the popup box on close
destroyOnClose: false,

// add default buttons to the popup box
defaultButton: true,

// swap button order
swapButtonOrder: false,

// start, end, center, between, around, evenly
justifyButtons: null,

// events
events: {
  show: null,
  shown: null,
  hide: null,
  hidden: null,
  hidePrevented: null,

// only applies to constructor modals
buttons: [],

// only applies to class modals, and overwrites defaults set by modbox.defaultButtonOptions
okButton: {
  label: 'OK',
  style: 'primary'
closeButton: {
  label: 'Cancel',
  style: 'secondary'

// only applies to .prompt() class modal
input: {
  type: 'text',
  class: '',
  value: '',
  title: null,
  placeholder: null,
  autocomplete: 'off',
  minlength: null,
  maxlength: null,
  pattern: null,
  required: false

7. Methods and characteristics.

// add a new button
// addButton(options, appendStart)
  label: 'New Button'

// dispatch an event
// addEvent(event, function)
instance.addEvent('shown', () => console.log('shown'));

// show the popup box

// hide the popup box

// toggle the popup box

// dispose the popup box

// destroy the instance

// re-position the popup box

JavaScript Wrapper For Bootstrap 5 Modals, bootstrap-modbox Plugin/Github

See Demo And Download

Official Website(erobertson42): Click Here

This superior jQuery/javascript plugin is developed by erobertson42. For extra Advanced Usages, please go to the official website.