Author: | babski123 |
---|---|
Views Total: | 896 views |
Official Page: | Go to website |
Last Update: | February 20, 2021 |
License: | MIT |
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