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.

Features:

• 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
$ 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
modbox.alert({
  body: 'Alert Message'
});

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

// variants
modbox.info({
  // options
});

modbox.success({
  // options
});

modbox.danger({
  // options
});

modbox.error({
  // options
});

3. Create a confirmation dialog.

modbox.confirm({
  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.

modbox.prompt({
  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'));
myModal.show();

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: '',

// 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, appendStart)
instance.addButton({
  label: 'New Button'
});

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

// show the popup box
instance.show(relatedTarget);

// hide the popup box
instance.hide();

// toggle the popup box
instance.toggle();

// dispose the popup box
instance.dispose();

// destroy the instance
instance.destroy();

// re-position the popup box
instance.handleUpdate();

The post JavaScript Wrapper For Bootstrap 5 Modals – Modbox appeared first on CSS Script.