html-dialog

a simple but flexible html dialog in javascript for any frontend. based on the html dialog element.

size of the minified module: 1.8kb

dialog installation & usage

installation in browser

<script src="dist/html-dialog.min.js"></script>
<script>
    var dialog = HtmlDialog.Dialog({
        title: 'Dialog Title',
        content: 'Dialog Content',
        buttons: [
            {
                text: 'OK',
                onclick: function () {
                    console.log('OK');
                }
            },
            {
                text: 'Cancel',
                onclick: function () {
                    console.log('Cancel');
                }
            }
        ]
    }).create();

    dialog.open();
</script>

For more examples, see the example.html file.

installation with npm

install with npm:

npm i html-dialog

then import the dialog:

import {Dialog} from 'html-dialog/dist/html-dialog.esm'

const myDialog = Dialog({...}).create()
myDialog.open()

For more examples, see the example.html file.

dialog methods

var dialog = HtmlDialog.Dialog({...});

dialog.create(dialogOptions);
dialog.open();
dialog.close();
dialog.destroy();
dialog.getDialog();
dialog.getForm();

method	description	return
create(dialogOptions)	adds dialog to DOM	dialog instance
open()	open dialog	dialog instance
close()	close dialog	dialog instance
destroy()	remove dialog from DOM	void
getDialog()	get dialog element	dialog element
getForm()	get form element	form element inside dialog

.create()

You can pass an optional parameter to the create() method to specify the parent element.

var dialog = HtmlDialog.Dialog({...});
dialog.create({
    appendTo: document.getElementById('my-dialog-container')
});

dialog options parameter

HtmlDialog.Dialog({
    title: 'Dialog Title',
    content: 'Dialog Content',
    buttons: [
        // ...
    ],
    classNames: {
        // ...
    }
})

option	type	default	description
title	string	required	dialog title
content	string	required	dialog content, can be any html / string
buttons	array	required	dialog buttons, see "buttons parameter"
classNames	object	{}	dialog css classnames, see "classNames parameter"

buttons parameter

{
    title: 'Dialog Title',
    content: 'Dialog Content',
    ...
    buttons: [
        {
            text: 'OK',
            type: 'button',
            focus: true,
            classNames: 'btn btn-primary',
            onclick: function (mouseevent) {
                console.log(mouseevent);
                this.close();
            }
        }
    ]
}

option	type	default	description
text	string	required	button text
type	string	'button'	button type. can be submit, button, reset
focus	boolean	false	focus button on dialog open
classNames	string	''	button css classnames
onclick	function	null	button callback
oncontextmenu	function	null	button callback
ondblclick	function	null	button callback
...	function	null	button callback

All valid mouse events are supported. See: https://www.w3schools.com/jsref/obj_mouseevent.asp

The callback function will be called with the dialog instance as this and the mouseevent as the first argument.

onclick: function (mouseevent) {
    console.log(mouseevent);
    this.close();
}

It's possible to add multiple callbacks to a button:

{
    text: 'OK',
    onclick: function () {
        console.log('onclick');
    },
    oncontextmenu: function () {
        console.log('contextmenu');
    }
}

classNames parameter

This option allows you to add custom css classnames to the dialog.

HtmlDialog.Dialog({
    title: 'Example',
    content: 'Hello World!',
    buttons: [
        // ...
    ],
    classNames: {
        dialog: 'dialog-class',
        title: 'title-class',
        content: 'content-class',
        buttons: 'buttons-class',
    }
});

The above code will result in the following html:

<dialog class="dialog-class">
    <form>
        <div class="title-class">Example</div>
        <div class="content-class">Hello World!</div>
        <div class="buttons-class">
            <button>OK</button>
            <button>Cancel</button>
        </div>
    </form>
</dialog>

option	type	default	description
dialog	string	''	dialog css classes
title	string	''	title css classes
content	string	''	content css classes
buttons	string	''	title css

example styles with backdrop:

.dialog-class {
    border: 1px solid red;
    padding: 0;
}

.dialog-class::backdrop {
    background-color: aqua;
}

dialog / prompt example with text input and form validation

HtmlDialog.Dialog({
    title: 'Example',
    content: `<div>Please give me a value:</div><input type="text" name="value" required>`,
    buttons: [
        {
            text: 'OK',
            type: 'submit',
            onclick: function () {
                let value = this.getForm().querySelector('input[name="value"]').value;
                if (value) {
                    console.log(value);
                    this.close();
                }
            }
        },
        {
            text: 'Reset',
            type: 'reset',
        },
        {
            text: 'Cancel',
            onmouseup: function () {
                this.close();
            }
        }
    ]
}).create().open();