plain-dialogs

HTML5 dialog element based alert/confirm/prompt; modal/non-modal variants, promisified API, no fancy CSS by default.

Demo

npm i plain-dialogs

file	lang	type	minified
dist/plain-dialogs.js	es6	UMD	x
index.mjs	es6	es6 module

Use dialog-polyfil for non-Chromium browsers (just include .css & .js before plain-dialogs lib; you don't need to initialize anything).

An unstyled modal alert:

The same dialog after applying some CSS:

Why?

The Chromium team actively discourages us from using window.alert et al., sometimes even implicitly preventing us from doing so.

One of the alternatives is to use a "native" dialog element that is supported by Chrome since forever but is still under a flag in Firefox.

Unfortunately, this means that the old sync pattern of

let r = confirm('are you sure?')
if (r) erase_all_the_monies()

doesn't work w/ "new" dialog elements. To ask a user we need to create a <dialog> dom node, fill it w/ the text of the question, add 2 buttons w/ the proper event listeners, wait for an answer, remove the node from the document.

This is what this lib does automatically, allowing us to write:

plainDialogs.confirm('are you sure?').then(erase_all_the_monies)

or

let r = await plainDialogs.confirm2('are you sure?')
if (r) erase_all_the_monies()

API

Every fn return a promise. The last arg of every fn is an option hash. The default opts are:

{
    modal: true,
    escape: true,
    title: undefined
}

alert

> await plainDialogs.alert('Hi, mom!')
true

> await plainDialogs.alert('<h1>Hi, mom!</h1>', {escape: false})
true

confirm

Reject a promise on clicking Cancel:

> try { await plainDialogs.confirm('really?') } catch (e) { console.log(`result: ${e}`) }
result: false

confirm2

Return a promise that always resolves. Here, a user clicks Cancel:

> await plainDialogs.confirm2('really?')
false

prompt

Reject a promise on clicking Cancel:

> await plainDialogs.prompt('Діти, хто це?', 'Це їжачок.')
Uncaught (in promise) null

prompt2

Return a promise that always resolves. If a user clicks Cancel, resolves to null.

Styling

By default there's no styling whatsoever. Every fn creates a tmp <dialog> node w/ b59LdZ-dlg class. Create a dialog & use the Elements tab in Developer Tools to discover more. See test/smoke.js for examples.

.b59LdZ-dlg {
  width: 275px;
  background: red;
}

License

MIT.