@ahmard/modal-helper v0.0.6

Modal Helper

Bootstrap 5 javascript modal helper.

Requirements

This library requires Bootstrap and jQuery to work .

Installation

npm install @ahmard/modal-helper

Basic Usage

const modal = ModalHelper.create(jQuery('#modal'));

modal.setTitle('Login')
    .setBody('<b>Login Form</b>')
    .setFooter('Footer')
    .show();

setTimeout(() => modal.hide(), 2500);

Sizing

When setting the size of modal, the following values are expected: small, large & extra-large or you can provide sm, lg & xl of course

const modal = ModalHelper.create(jQuery('#modal'));

modal.setTitle('Login');
modal.setBody('<b>Login Form</b>');
modal.setSize('medium');

modal.show();

Fullscreen

When providing modal fullscreen value, the following values are expected: small, medium, large, extra-large & extra-extra-large or provide sm, md, lg, xl & xxl

const modal = ModalHelper.create(jQuery('#modal'));

modal.setTitle('Login');
modal.setBody('<b>Login Form</b>');
modal.setFullScreen('medium');

modal.show();

Options

const modal = ModalHelper.create(jQuery('#modal'));

modal.setTitle('Login');
modal.setBody('<b>Login Form</b>');

modal.setFullScreen('medium');

modal.setOption({
    backdrop: false,
    keyboard: false,
    focus: true
});

modal.show();

Events

ModalHelper makes it easier to work with BS event system too

• Adding Listeners

const modal = ModalHelper.create(jQuery('#modal'));

modal.getEvent().onShow(function () {
    console.log('Modal is showing...');
});

modal.getEvent().onShown(function () {
    console.log('Modal has shown');
});

modal.getEvent().onHide(function () {
    console.log('Modal is hiding...');
});

modal.getEvent().onHidden(function () {
    console.log('Modal is hidden');
});

modal.getEvent().onHidePrevented(function () {
    console.log('Modal is hide prevented');
});

Both of the methods above accept second parameter fireOnce that indicated this event shall fire once, this parameter has false as default.

const modal = ModalHelper.create(jQuery('#modal'));
const listener = function () {
    console.log('Modal has shown, and this message won\'t be showing again.');
};

modal.getEvent().onShown(listener, false);

modal.show();

• Removing Listeners

const modal = ModalHelper.create(jQuery('#modal'));

modal.getEvent().offShow(); // Remove "showing event"
modal.getEvent().offShown(); // Remove "shown event"
modal.getEvent().offHide(); // Remove "hide event"
modal.getEvent().offHidden(); // Remove "hidden event"
modal.getEvent().offHidePrevented(); // Remove "hide prevented event"

Miscellaneous

const modal = ModalHelper.create(jQuery('#modal'));

modal.setScrollable(true); // Make the modal scrollable
modal.setVerticallyCentered(true); // Make the modal vertically centered

modal.show();