SimplyDialogs

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

A small collection of standard dialogs: alert(), confirm(), error(), info(), bell(), wait(), progress() 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.

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, Tailwind 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 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 > ~18.5kb minified (current version v1.1.0)

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, instead some useful methods to interact with the dialog const wait = Dlg.wait('Lorem ipsum ...') //do something in code wait.setText('alter the dialog message') wait.addText('add something to the dialog message') wait.close()
progress()		Does not return a promise, instead some useful methods to interact with the dialog const progress = Dlg.progress('Lorem ipsum ...') //do something in code progress.setValue(42) progress.setText('alter the dialog message') progress.close()
input() prompt()		By default just a prompt with a single text input : Dlg.input('Lorem ipsum ...').then(state) => { ... }) You can specify complex input forms Dlg.input('Lorem ipsum ...', { input: { inputs: [ { type: 'input', inputType: 'text', label: 'Name', name: 'name' }, { type: 'input', inputType: 'number', label: 'Age', name: 'age' }, ]} }).then(state) => { ... }) You can add a callback to control the submit button callback: function(state, dialog) { return state.name !== '' && state.age > 42 })

Usage

Include the script and CSS.

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

Or refer to the .mjs version if you want to use SimplyDialogs as module

import { SimplyDialogs } from './dist/SimplyDialogs.min.mjs'

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

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

const wait = Dlg.wait('Lorem ipsum dolor sit amet')
setTimeout(function() {
  wait.close()
}, 2000)

const progress = Dlg.progress('Lorem ipsum dolor sit amet', { progress: { max: 100, value: 0 }})
let value = 0
const interval = setInterval(function() {
  value++
  progress.setValue(value)
  if (value === 100) {
    clearInterval(interval)
    progress.close()
  }
}, 50)


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