Back to Overview
Component

MessageBox

A modern, Promise-based modal dialog utility for displaying notifications, alerts, warnings, custom confirmation selections, and text inputs asynchronously.

Overview

Modal Execution: Unlike classic browser alert() or confirm() methods, MessageBox uses the HTML5 <dialog> element, running fully asynchronously via Javascript Promises without blocking the main browser thread.

The MessageBox utility class is designed to show styled, modern modal dialog cards. It supports default themes for Info, Warning, Error, and Question types, complete with responsive SVG icons and action buttons.

Usage Examples

Triggering different alert styles and catching confirmation selections is straightforward with async/await:

import { MessageBox } from './components/MessageBox.mjs';

// 1. Displaying a simple Info modal
await MessageBox.info('Operation completed successfully.');

// 2. Displaying an Error warning
await MessageBox.error('Database connection failed!');

// 3. Requesting a custom confirmation choice
const choice = await MessageBox.confirm(
  'Do you want to save changes before exiting?',
  MessageBox.ButtonYesNoCancel
);

if (choice === 'yes') {
  // Save routine...
}

Static Properties

Property Type Description
ButtonOkCancel Object Freezed standard collection containing: ok (Ok button) and cancel (Cancel button).
ButtonYesNo Object Freezed standard collection containing: yes (Yes button) and no (No button).
ButtonYesNoCancel Object Freezed standard collection containing: yes, no, and cancel.

Static Methods

Method Arguments Description
show(message, config) (message: String, config?: Object) Underlying runner to instantiate and open a modal with specific title, buttons config, and SVGs. Returns the key of clicked button.
info(message) (message: String) Pops up an information dialog card with an info icon.
warning(message) (message: String) Pops up a warning warning card with a warning icon.
error(message) (message: String) Pops up an error card with an error icon. Automatically handles redirection if user needs authorization.
confirm(message, buttons) (message: String, buttons?: Object) Pops up a confirmation dialog using a question icon and custom button options. Defaults to Ok/Cancel.
confirmAndWarn(message, buttons) (message: String, buttons?: Object) Pops up a warning confirmation dialog using a warning icon.
ask(message) (message: String) Pops up a simple text input modal. Resolves with input value string, or null if cancelled.