Async JS Dialogs
Built for the Modern Web
Replace the browser's boring, rigid native dialogs. Dialog-JS 2.0 delivers customizable modal windows — Promise-based, smoothly animated, and ready to use with multiple themes.
Another JS dialog? Why?
Yes, another one — but designed to never get in your way.
We know there are many options out there, but native browser functions like
alert(), prompt(), and confirm() can't be styled and don't
support clean async flows. Dialog-JS 2.0 lets you integrate beautiful, accessible dialogs with just a
single line of code.
Ultra Lightweight
Less than 2KB gzipped. Zero external dependencies to keep your page lightning-fast.
Promise-Based API
Full async/await support. Get user responses in a clean, readable way.
Flexible Themes
Choose between Default, Dark, iOS, and Android themes — no extra CSS required.
Fully Accessible
Built on native <dialog> with focus trapping, ESC key support, and backdrop
clicks.
ES Module Ready
Works seamlessly with modern ES Modules. Import it directly — no build step needed.
Toast Notifications
Non-blocking toasts with a visual progress bar, configurable position and duration.
Dialog types for every use case
Explore the interactive dialog types you can generate instantly in your project.
Alert
Replaces the native browser alert. Perfect for informing users of a completed action or important notice.
Prompt
Requests user input with a styled input field. Supports any HTML input type — text, email, number, date, and more.
Confirm
Handles critical user decisions — accept or deny a destructive action before it runs.
Toast
Non-blocking temporary notifications with a visual progress bar, stackable and fully configurable.
Quick Installation
Integrate Dialog-JS 2.0 into your project in under a minute.
Install via NPM and import the module in your JavaScript file:
npm install dialog2
Then import it in your JS file:
import { Dialog2 } from './src/dialogJS2.0.js';
Use it directly in the browser via native script modules — no build step needed:
<script type="module">
import { Dialog2 } from './src/dialogJS2.0.js';
window.Dialog2 = Dialog2;
</script>
Add this snippet in
the <head> of your HTML. Exposing window.Dialog2 makes it
accessible globally from any script.
Link a theme CSS file in the <head> of every HTML page that uses the
library:
<link rel="stylesheet" href="./src/dialogJS2-default-theme.css">
Available CSS files:
dialogJS2-default-theme.css, dialogJS2-dark-theme.css,
dialogJS2-ios-theme.css, dialogJS2-android-theme.css. Choose one
per document.
Configuration Parameters
Each dialog method accepts positional parameters. Here's the full reference for every type.
Alert
Dialog2.Alert(title, message, icon, okButtonText)
Displays an alert modal with an OK button. Returns a Promise that resolves to
true when closed, or null if cancelled via ESC.
| Parameter | Type | Default | Description |
|---|---|---|---|
title |
string |
Required |
Title text of the dialog header. |
message |
string |
Required |
Body content or message displayed inside the dialog. |
icon |
string |
'INFO' |
Animated SVG 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!'
);
Confirm
Dialog2.Confirm(title, message, icon, okButtonText, cancelButtonText)
Displays a confirmation dialog with two buttons. Returns true if
confirmed, false if cancelled, or null on ESC / backdrop click.
| Parameter | Type | Default | Description |
|---|---|---|---|
title |
string |
Required |
Title text of the dialog. |
message |
string |
Required |
Question or statement to present to the user. |
icon |
string |
'QUESTION' |
Animated SVG icon: 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
}
Prompt
Dialog2.Prompt(title, message, placeholder, inputType, okButtonText, cancelButtonText)
Displays a dialog with a customizable input field. The input is fully
customizable — you can pass any valid HTML input type (e.g.
text, email, password, number,
date, color, range, etc.) to match your data needs. Returns
the entered value as a string, null if cancelled.
| Parameter | Type | Default | Description |
|---|---|---|---|
title |
string |
Required |
Title text of the prompt dialog. |
message |
string |
Required |
Descriptive text guiding the user's input. |
placeholder |
string |
'' |
Placeholder text shown inside the input field. |
inputType |
string |
'text' |
Any valid HTML input type: text, number,
password, email, date, color,
range, and more. |
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: ${userEmail}`);
}
Toast
Dialog2.Toast(message, icon, duration, position)
Fires a non-blocking, temporary notification on screen with a timed visual progress bar. Multiple toasts can stack without interrupting the user's workflow.
| Parameter | Type | Default | Description |
|---|---|---|---|
message |
string |
Required |
The message text to display inside 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 on screen: top-left, top-center,
top-right. |
Dialog2.Toast(
'Connection lost. Retrying...',
'WARNING',
5000,
'top-center'
);
Promise-based pattern
.then() / async await
Every dialog method (except Toast) returns a Promise resolving
to true (OK pressed), false (Cancel pressed), or null (ESC
key). You can use either async/await or .then():
Dialog2.Confirm(
'Confirm deletion',
'Can you confirm to delete this file?',
'QUESTION',
'Confirm',
'Cancel'
)
.then((result) => {
if (result === true) {
// user confirmed code
} else {
// user cancelled code
}
});
Ready-to-Use Themes
Dialog-JS 2.0 includes four meticulously designed CSS themes. Link the one that
fits your project in the <head> of your HTML.
Default
Clean and neutral. A professional light-leaning style that works in any context.
dialogJS2-default-theme.css
Dark
Deep dark background with vivid accent colors. Perfect for dark-mode interfaces.
dialogJS2-dark-theme.css
iOS
Inspired by Apple's Human Interface Guidelines — soft, rounded, and polished.
dialogJS2-ios-theme.css
Android
Follows Material Design principles with clean lines and vibrant, familiar accents.
dialogJS2-android-theme.css
💡 Tip: You can also use any theme CSS file as a starting point and share it with an AI platform to generate your own custom design, keeping all the existing CSS class names intact.
Questions or suggestions?
Reach out to report bugs, request improvements, or propose new features for Dialog-JS 2.0.
Your email will not be used for commercial purposes or advertising.