Dialogify

A dialog plugin built on the native <dialog> element.

中文

The browser does the heavy lifting — the top layer, the backdrop, focus trapping and Esc to close all come from <dialog> itself. Dialogify adds the chrome around it: a title bar, a button row, ajax content, forms, drawers, toasts and anchored popovers.

Documentation and live examples →

Installation

npm install @oneup_network/dialogify jquery

jQuery is a peer dependency, so install it alongside dialogify.

Browser

<script src="path/to/jquery.min.js"></script>
<script src="path/to/dialogify.min.js"></script>

The browser build reads jQuery from the global scope.

Module (ESM / CommonJS)

import Dialogify from '@oneup_network/dialogify';

Styles

Every build carries its own CSS, so no extra stylesheet is required. To style the dialog yourself, link the standalone @oneup_network/dialogify/css with id="dialogifyCss" before dialogify loads and the injection is skipped.

Basic usage

Build a dialog by chaining, then open it. show() and showModal() return a promise that resolves with the dialog's returnValue once it closes.

new Dialogify('dialog content')
    .title('dialog title')
    .buttons([{ type: Dialogify.BUTTON_PRIMARY }])
    .showModal();

alert, confirm and prompt have one-line replacements:

await Dialogify.alert('Alert!!');

if (await Dialogify.confirm('Yes or no?')) {
    // ...
}

const answer = await Dialogify.prompt('Question?');

A dialog can also be written straight into the page as a customized built-in element, with options as attributes and the whole API on the element itself:

<dialog is="bahamut-dialogify" dialog-title="Hello">
    dialog content <b>bold text</b>
    <button ok></button>
    <button cancel></button>
</dialog>

document.querySelector('dialog[is="bahamut-dialogify"]').showModal();

Documentation

Everything else lives on the documentation site, with a runnable example next to each feature:

Topic	What you will find
Getting started	Installing and opening a first dialog
Core concepts	Modal vs non-modal, chaining, promises, lifecycle
Creating a dialog	Every constructor option
Content	Titles, HTML content, ajax loading, loading state
Forms	Validation and reading values back
Buttons	Defining them and driving them at runtime
Events	show, close, cancel and intercepting a close
Drawer, toast, popover	Edge drawers, notifications and anchored popovers
Shortcuts	alert, confirm, prompt, toast
Declarative usage	<dialog is="bahamut-dialogify">, attributes, buttons, events
Theming	Custom properties, dark theme, z-index
Locale	Built-in languages and adding your own
API reference	Every method, property, option and constant

Content is inserted as HTML, which makes rich layouts easy but means any user-supplied value has to be escaped before it goes in.

Browser support

Any browser with a native <dialog> element: Chrome 94+, Firefox 98+ and Safari 15.4+. The bundles target es2022.

Two optional bundles cover the gaps, and both must be loaded before dialogify:

<!-- <dialog> for older browsers -->
<script src="path/to/dialog-polyfill.min.js"></script>
<!-- customized built-in elements, i.e. `is="..."`, for Safari -->
<script src="path/to/custom-elements.min.js"></script>
<script src="path/to/dialogify.min.js"></script>

Dependencies

• jQuery — peer dependency, >=3.0.0 (jQuery 4 included)

Designed by

Phoebe

Contributing

npm install
npm run build
npm test

Fork the repo, branch off master, and open a pull request. Contributions are welcome.