JavaScript Wrapper For Bootstrap 5 Modals – Modbox

Category: Javascript , Modal & Popup | October 26, 2021
Views Total:171 views
Official Page:Go to website
Last Update:October 26, 2021


JavaScript Wrapper For Bootstrap 5 Modals – Modbox


Modbox is a vanilla JavaScript wrapper around the Bootstrap 5 modal component, which helps you create custom popup windows using Bootstrap styles.


  • Info/Success/Danger/Error alerts.
  • Confirmation dialogs.
  • Prompt popups.
  • Supports Promise API.
  • Asynchronous content loading.

How to use it:

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

$ npm i bootstrap-modbox
// From CDN
<script src=""></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. Full 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: '',

// alternate to the body configuration option
message: '',

// 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 & properties.

// add a new button
// addButton(options, swapOrder)
  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


v1.2.1 (10/26/2021)

  • Added: New message modal configuration option as an alternative to body
  • The 2nd argument for the addButton() instance method has been renamed from appendStart to swapOrder to more accurately reflect its behavior.

You Might Be Interested In:

Leave a Reply