🔔 NOTE ABOUT BUGS 🐞
We have become aware about the behavior of Toast() method called into of .then()
method control process. We are implementing the solution in our library (Dev and Minified)
but we will publish the official fixed version in NPM after several validation tests.
A lightweight, modern, and dependency-free JavaScript library for creating asynchronous, accessible native modal dialogs and toasts. Its weight is just (8kb). Powered by the native HTML5 <dialog> element and fully compatible with JS Modules (ESM).
- Asynchronous API: Every modal (
Alert,Confirm,Prompt) returns a Promise, allowing cleanasync/awaitsyntax. - Zero Dependencies: Built entirely with native web standards.
- Fully Animated SVGs: Includes responsive, modern vector icons for different states (
SUCCESS,ERROR,WARNING,QUESTION,INFO). - Accessible: Uses native browser modal behaviors (
showModal()), trap-focus, and supports closing via theEsckey or backdrop clicks. - CSS files: You can implement this library with four differents CSS pre-built designs. You can choose between (
Default,Dark,iOS,Android) themes or take one CSS file and share it as a model with an A.I. platform to create your own CSS design keeping the same CSS classes pre-built.
Install the package in your project:
npm i dialog-js2.0Import and use it in your JavaScript file:
import { Dialog2 } from 'dialogJS2.0.js';You can also use it directly in the browser via native script modules:
<script type="module">
import { Dialog2 } from './assets/js/dialogJS2.0.js';
window.Dialog2 = Dialog2;
</script>Add this code in the <head> section in your HTML file(s) after download this library. window.dialog2 expose the DialogJS2 object in the window global object. This way able you to call the Dialog2 object into your JS code.
Dialog Library.
The default CSS file for this library is dialogJS2-default-theme.css. Reference this CSS file in the <head> section of every HTML file you include to your project.
<link rel="stylesheet" href="./assets/css/dialogJS2-default-theme.css">Check our offer about different pre-built CSS styles.
- Apple mobile (iOS - iPadOS)
- Android (Material 3)
- Dark theme (same as default but dark)
- Default theme (of course the main or base option)
Dialog2.Alert(title, message, icon, okButtonText)
Displays an alert box with an 'Ok' button. Resolves to true when closed or null if cancelled via ESC.
| Parameter | Type | Default | Description |
|---|---|---|---|
| title | string | Required | Title text of the dialog. |
| message | string | Required | Body content/message. |
| icon | string | 'INFO' | Icon type: SUCCESS, ERROR, WARNING, QUESTION, INFO. |
| okButtonText | string | 'Ok' | Label for the confirmation button. |
await Dialog2.Alert(
'System Updated',
'All changes have been successfully saved.',
'SUCCESS',
'Got it!'
);Dialog2.Confirm(title, message, icon, okButtonText, cancelButtonText)
Displays a confirmation dialog box with two buttons. Resolves to true if the user confirms, and false if they cancel or click the backdrop.
| Parameter | Type | Default | Description |
|---|---|---|---|
| title | string | Required | Title text of the dialog. |
| message | string | Required | Question or statement text. |
| icon | string | 'QUESTION' | "Icon type: SUCCESS, ERROR, WARNING, QUESTION, INFO." |
| okButtonText | string | 'Confirm' | Label for the positive action button. |
| cancelButtonText | string | 'Cancel' | Label for the negative action button. |
const isDeleted = await Dialog2.Confirm(
'Delete File',
'Are you sure you want to delete this report?',
'WARNING',
'Yes, delete',
'No, keep it'
);
if (isDeleted) {
// Proceed with deletion logic
}Dialog2.Prompt(title, message, placeholder, inputType, okButtonText, cancelButtonText)
| Parameter | Type | Default | Description |
|---|---|---|---|
| title | string | Required | Title text of the prompt. |
| message | string | Required | Descriptive text guiding the input. |
| placeholder | string | '' | Placeholder text inside the input box. |
| inputType | string | 'text' | "The HTML input type (e.g., text, number, password, email)." |
| okButtonText | string | 'Confirm' | Label for the submission button. |
| cancelButtonText | string | 'Cancel' | Label for the cancellation button. |
const userEmail = await Dialog2.Prompt(
'Newsletter',
'Please enter your email:',
'example@mail.com',
'email'
);
if (userEmail) {
console.log(`Subscribed email: ${userEmail}`);
}Dialog2.Toast(message, icon, duration, position)
Fires a non-blocking temporary notification stack on the screen with a timed visual progress bar.
| Parameter | Type | Default | Description |
|---|---|---|---|
| message | string | Required | Message to show in the toast. |
| icon | string | 'INFO' | Icon type: SUCCESS, ERROR, WARNING, QUESTION, INFO. |
| duration | number | 3000 | Auto-dismiss timer in milliseconds. |
| position | string | 'top-right' | Toast placement: top-left, top-center, top-right. |
Dialog2.Toast(
'Connection lost. Retrying...',
'WARNING',
5000,
'top-center'
);Dialog2.About()
Triggers an informational Alert dialog displaying the library's built-in version, copyright credentials, and license notice.
Dialog2.About();If you prefer to implement a JS logic by using a .then() Promise control method after pressing Accept or Cancel in a Dialog2 method, check the folowwing sample code:
Dialog2.Confirm(
'Your dialog title',
'Can you confirm to Delete this file?',
'QUESTION',
'Confirm',
'Cancel'
)
.then((result) => {
if (result === true) {
// your logic here
} else {
// another logic after cancel
}
});Every Dialog method except Toast() returns a true boolean value when the user press the Ok button, or a false boolean value when the user press the Cancel button. If the user press the ESC key, the dialog will close and the Promise returns null.
Keep this return params in mind and make a full test in different scenarios to apply the best practices in your code.
Developed by Fernando Omar Luna.
This library is free to use in any personal or open-source projects. If you are integrating this library into a commercial application or a popular platform, attributing the author in your app's credits/acknowledgments section is highly appreciated.