Tiny Bootstrap 5 Modal Generator – BS5ModalJS

Category: Javascript , Modal & Popup | February 20, 2021
Author: babski123
Views Total: 159 views
Official Page: Go to website
Last Update: February 20, 2021
License: MIT

Preview:

Tiny Bootstrap 5 Modal Generator – BS5ModalJS

Description:

BS5ModalJS is a JavaScript library that helps developers generate Bootstrap 5 modal windows using only JavaScript.

How to use it:

1. Load the BS5ModalJS JavaScript library in your Bootstrap 5 project.

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

<!-- BS5ModalJS Library -->
<script src="BS5Modal.js"></script>

2. Create a new instance of the Bootstrap 5 modal window.

  • id: unique modal ID
  • title: Modal title
  • message: Modal content
  • callBack: fired after the confirm button is clicked
// BSModal(id, title, message, callBack = null);
let myModal = new BSModal("myModal","Modal Title", "Modal Content?", function() {
    // do something
});

3. Create a toggle button to launch the modal window.

// toggleButton(innerText = "Submit", classes = "btn btn-outline-primary")
let toggleBtn = myModal.toggleButton("Launch", "btn btn-outline-danger");

4. Append the toggle button to the page.

document.querySelector("#demo").appendChild(toggleBtn);

5. Available properties.

// modal element
modalElement {node}

// modal ID
elementId {string}

// modal title
elementTitle {string}

// modal body
elementMessage {string}

// modal dialog element
modalDialog {node}

// cancel button
cancelBtn {node}

// confirm button
confirmBtn {node}

6. Available methods.

// set the modal's backdrop to static
myModal.staticBackdrop();

// turn the modal's dialog into a scrollable dialog
myModal.scrollableDialog();

// center the modal vertically
myModal.verticallyCentered();

// change the size of the modal
// size: xl, lg, or sm
myModal.changeSize(size);

// remove the animation
myModal.removeAnimation();

Changelog:

02/20/2021

  • add more properties and methods

02/20/2021

  • add staticBackdrop() method

You Might Be Interested In:


Leave a Reply