Author: | srisar |
---|---|
Views Total: | 650 views |
Official Page: | Go to website |
Last Update: | July 5, 2021 |
License: | MIT |
Preview:

Description:
This is a JavaScript library that utilizes the Bootstrap 5 modal component to create custom dialog boxes like alert notifications, confirm dialogs, and prompt popup boxes.
How to use it:
1. This library requires the latest Bootstrap 5 framework.
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" /> <script src="/path/to/cdn/bootstrap.min.js"></script>
2. Import the bsDialog as an ES module.
<script type="module"> import * as bsDialog from "./src/bs-dialogs.js"; </script>
3. Create alert dialog boxes.
bsDialog.infoDialog({ message: "Info Message", }); bsDialog.successDialog({ message: "Success Message With Title", title: "SUCCESS" }); bsDialog.errorDialog({ message: "Error Message With Callback", title: "ERROR!" }, function () { bsDialog.infoDialog({ message: "Callback", }); });
4. Create an ‘INPUT’ prompt popup box.
bsDialog.textPrompt({ message: "Prompt Message", title: "Prompt Title" }, function (data) { // make sure to sanitize the input data let value = data.trim(); // fired after confirmed }, function () { // fired after cancelled });
5. Create a ‘TEXTAREA’ prompt popup box.
bsDialog.textAreaPrompt({ message: "Prompt Message", title: "Prompt Title" }, function (data) { // make sure to sanitize the input data let value = data.trim(); // fired after confirmed }, function () { // fired after cancelled });
6. Create a ‘NUMBER’ prompt popup box.
bsDialog.numberPrompt({ message: "Prompt Message", title: "Prompt Title" }, function (data) { let value = parseInt(data); // fired after confirmed }, function () { // fired after cancelled });
7. Create a ‘DATE’ prompt popup box.
bsDialog.datePrompt({ message: "Prompt Message", title: "Prompt Title" }, function (data) { // fired after confirmed }, function () { // fired after cancelled });
Changelog:
07/05/2021
- Bugfix