A Javascript Multi Dialog Library Plugin | Dialog.js

Dialog.js is a pure JavaScript plugin for creating modern, easy-to-style dialogs using the HTML <dialog> element. Here you can use single or multiple-choice dialog boxes. If a multiple-selection dialog is present – a confirmation button will appear.

dialog library github, custom popup dialog example github, custom material dialog github, fancy dialog github, pretty dialog library

How to make use of it:

Include the core JavaScript and Stylesheet on the web page.

<link rel="stylesheet" href="css/dialog.css">
<script type="text/javascript" src="js/dialog.js"></script>

Include the dialog polyfill for Edge and Firefox.

<script type="text/javascript" src="js/dialog-polyfill.js"></script>

Create an alert dialog.

Dialog.alert('Hello Dialog!');

With a customized title.

Dialog.alert('Hello Caption', 'Caption');

Create an affirmation dialog.

Dialog.confirm('Are you sure to leave', 'Question', (dlg) => {
}, (dlg) => {
  alert('Thank you!');

Create a dialog with the customized template. Ideal for immediate dialog.

let dlg = Dialog.template(document.getElementById('tpl'), 'Use template');
dlg.beforeClosing(() => {
    let name = dlg.content.querySelector('.name').value;
    const require = 'nemo';
    if (name != require) {
        alert('You must input nemo');
        return false;
    } else {
        return true;
}).closed(() => { alert('Close'); })
.cancelable = false;

Create an iframe dialog.

Dialog.iframe('example.html', 'Dialog Title', '360px', '440px');

Customize the dialog with the next choices.

let dlg = new Dialog({
  caption: 'User define dialog',
  message: 'You can click [Abort] to exit.',
  showClose: false,
  buttons: Dialog.buttons.ABORT_RETRY_IGNORE,

  cancelable: false,
  abortHandler: (dlg) => { dlg.close(); },
  retryHandler: () => { alert('retry...'); },
  ignoreHandler: () => { alert('ignore'); },

Customize the styles of dialog.

.dlg-dialog {
  border: none;
  box-shadow: 10px 10px 20px gray;

.dlg-header {
  background-color: #555;
  color: white;

.dlg-caption {
  height: 1.17em;
  text-shadow: 1px 1px 1px black;

.dlg-close-button::after {
  background-color: white;

All default customization options.

let dlg = new Dialog({
    caption: '',
    message: '',
    content: undefined,
    buttons: Dialog.buttons.NONE,
    resize: 'none',
    cancelable: true,
    showHeader: true,
    showClose: true,
    showFooter: false,

Event handlers are accessible.

let dlg = new Dialog({
    abortHandler: undefined,
    cancelHandler: () => { this.close(); },
    ignoreHandler: undefined,
    noHandler: undefined,
    okHandler: () => { this.close(); },
    retryHandler: undefined,
    yesHandler: undefined,

    // events
    beforeClosing: () => { return true; }, // set to false to prevent close
    closed: undefined,

Multi-Purpose Dialog Library, dialog Plugin/Github, dialog with edittext github

See Demo And Download

Official Website(nemo-wu): Click Here

This superior jQuery/javascript plugin is developed by nemo-wu. For extra Advanced usage, please go to the official website.