Tiny Bootstrap 5 Modal Generator – BS5ModalJS

Preview:

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