A Simple Material Design Dialog Plugin In Pure JavaScript

Simple materials concept dialogue extension (no jQuery required, no coding required). duDialog is a pure JavaScript plugin for creating Material Design impressed alert, confirmation, choice dialog popups with no dependencies.

full screen dialog android material design, material ui dialog, angular material dialog, custom material dialog android github, material ui dialog example, angular material dialog example

How to make use of it:

1. To get began, insert the duDialog’s JavaScript and CSS records data into the web page.

<script src="duDialog.js"></script>

2. Create a fundamental alert dialog with an OK button.

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

3. Create an affirmation 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', ['', '', ''], {
  selection: true, 
  callbacks: {
    itemSelect: function(e, item){
      // this.value
    }
  }
});

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

4. All optionally available 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

Modern Material Design Dialog Generator, Material Design Dialog Box, Alert Dialog Material Design, android dialog example, android popup dialog example