Modern Material Design Dialog Generator In Pure JavaScript – duDialog

Category: Javascript , Modal & Popup | December 7, 2018
Author: dmuy
Views Total: 118
Official Page: Go to website
Last Update: December 7, 2018
License: MIT

Preview:

Modern Material Design Dialog Generator In Pure JavaScript – duDialog

Description:

duDialog is a pure JavaScript plugin for creating Material Design inspired alert, confirmation, selection dialog popups without any dependencies.

How to use it:

To get started, insert the duDialog’s JavaScript and CSS files into the page.

<link href="duDialog.css" rel="stylesheet">
<script src="duDialog.js"></script>

Create a basic alert dialog with an OK button.

new duDialog('Alert Message', 'This is an alert message.');

Create a confirmation dialog with callbacks.

new duDialog('Confirm Dialog', 'Are You SUre', duDialog.OK_CANCEL, { 
    okText: 'Confirm',
    callbacks: {
      okClick: function(){
        // do something
      },
      cancelClick: function(){
        // do something
      }
    }
});
new duDialog('Select An Item', ['CSS', 'SCRIPT', 'COM'], {
  selection: true, 
  callbacks: {
    itemSelect: function(e, item){
      // this.value
    }
  }
});

// or
new duDialog('Select An Item', 
    [{ name: 'CSS', id: 1 }, { name: 'SCRIPT', id: 2 }, { name: 'COM', id: 3 }], 
    {
    selection: true,
    textField: 'name',
    valueField: 'id',
    callbacks: {
      itemSelect: function(e, i){
        // this.value
      }
    }
});

All optional settings with default values.

okText: 'Ok', 
cancelText: 'Cancel',
selection: false, // enables item selection
multiple: false, // enables multiple selection
selectedValue: null, // preselected values
valueField: 'value', // field name
textField: 'item',  // field name
callbacks: null // callbacks

Changelog:

12/07/2018

  • Small fixes

11/28/2018

  • Minor updates

You Might Be Interested In:

Leave a Reply