SimplyDialogs

Demos and documentation here ⇨ https://simplydialogs.github.io

A small collection of standard dialogs: alert(), confirm(), error(), info(), bell(), wait() and input(). Built with ES6 and unicode, utilizing the native <dialog> HTML element. Works in all modern browsers. Tested with Chrome, Opera, Firefox and Edge (Linux & Windows 10).

Use SimplyDialogs if you just need some dialogs on a minimalistic webpage - or want a quick alternative to the built-in dialogs or modals provided by your favourite framework, like Bootstrap, MaterializeCSS or similar. You can customize the layout so it get the look of your theme / framework.

• No dependencies; using native <dialog> element and unicode
• Truly blocking interaction with background
• Stays in center of viewport, adjusted to message size, stays in focus while scrolling
• Return promises
• Support keyboard / mouse the right way
• Highly customizeable
• Stackable
• Neat exploding / imploding effect without exaggerating
• No forced styling (beyond very basics), adopts the current "theme"
• Very small footprint, JS + CSS > ~17.3kb minified (current version v1.0.11)

Dialogs

Type	Sample	Remarks
alert()		Dlg.alert('Lorem ipsum ...') Dlg.alert('Lorem ipsum ...', options) Returns promise, ex: Dlg.alert('Lorem ipsum ...').then(answer => { console.log(answer) //true, false if closed with ESC })
information() info()		Same as alert()
confirm()		Dlg.confirm('Lorem ipsum ...').then(answer => { console.log(answer) //true or false })
error()		Same as alert()
bell()		Same as alert() Produces a "beep"; if you not need the beep you can remove it from defaults, i.e DEFAULTS.beep = undefined and save around 4k.
wait()		Does not return a promise, but a function you can close the wait dialog with : const wait = Dlg.wait('Lorem ipsum ...') //do something in code wait.close()
input() prompt()		Return promise holding the form state, i.e ```{ firstname: 'Arthur', age: 42 }``` Dlg.input('Lorem ipsum ...', options).then(state) => { ... }) You can define a callback in options or DEFAULTS, to determine if the user can submit : callback: function(state, dialog) { return state.firstname !== '' }) If needed, you can pass a promise instead : promise: function(state, dialog) { return new Promise((resolve) => { resolve ( true || false ) }) })

Usage

Include the script and CSS.

<script src="path/to/simplydialogs/dist/SimplyDialogs.min.js"></script>
<link rel="stylesheet" type="text/css" href="path/to/simplydialogs/dist/SimplyDialogs.min.css">

That makes a SimplyDialogs function available. For convenience, create a shorthand alias :

const Dlg = SimplyDialogs
Dlg.alert('Lorem ipsum dolor sit amet, consectetur adipiscing elit')
Dlg.error('Lorem ipsum dolor sit amet, consectetur adipiscing elit')
Dlg.confirm('Lorem ipsum dolor sit amet, consectetur adipiscing elit')
Dlg.info('Lorem ipsum dolor sit amet, consectetur adipiscing elit')
Dlg.bell('Lorem ipsum dolor sit amet, consectetur adipiscing elit')

const wait = Dlg.wait('Lorem ipsum dolor sit amet, consectetur adipiscing elit')
wait.close()

Dlg.input('Lorem ipsum dolor sit amet, consectetur adipiscing elit').then(formState => {
  console.log(formState)
})