Build Customizable Modals With AvalynxModal And Bootstrap

Preview:

Description:

AvalynxModal is a JavaScript plugin for creating highly customizable modal windows with fullscreen (minimize/maximize windows) support.

This plugin is heavily based on Bootstrap’s Modal component. It provides a simple API for creating and managing Bootstrap 5 modals within your applications You can easily customize the modal’s title, content, buttons, and more.

How to use it:

1. To get started, make sure you have the latest Bootstrap 5 framework loaded in your web project.

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/bootstrap.bundle.min.js"></script>

2. Download the AvalynxModal plugin and load the following files.

<link href="/path/to/avalynx-modal.css" rel="stylesheet">
<script src="/path/to/avalynx-modal.js"></script>

3. You can also install & import the AvalynxModal plugin with NPM.

# NPM
$ npm install avalynx-modal

import { AvalynxModal } from 'avalynx-modal';
import 'avalynx-modal/dist/css/avalynx-modal.min.css';

4. Now, let’s create a Bootstrap modal on the page. Create an instance of AvalynxModal, assign a unique ID to the modal, and define its content as follows:

const myModal = AvalynxModal("#myModal", {
  title: 'Modal Title',
  body: 'Modal Body',
  buttons: [
    {
      label: 'Close',
      class: 'btn btn-primary',
      onClick: function() {
        myModal.close(); // close
      }
    }
  ]
});

5. Customize your modal windows with the following options & callbacks.

const myModal = AvalynxModal("#myModal", {
  // options and defaults
  // Is fullscreen or not
  modalFullscreen: false,
  
  title: '',
  titleIsHtml: false,
  body: '',
  bodyIsHtml: false,
  // URL to fetch the body content from
  bodyAjaxUrl: '',
  buttons: [],
  // Retain the modal instance after it's closed
  safeInstance: false,
  disableFullscreen: false,
  disableClose: false,
  removeFullscreenBtn: false,
  removeCloseBtn: false,
  // An instance of AvalynxLoader to use as the loader for the modal
  // See https://www.cssscript.com/loading-overlay-bootstrap/
  loader: null,
  // callbacks
  onModalCreated: null,
  onFullscreenToggled: null,
  onModalClosed: null,
});

Changelog:

v1.0.0 (06/05/2025)

• v1.0.0

v0.0.2 (03/08/2025)

• assetscomposer.json added