A Simple Material Design Dialog Plugin In Pure JavaScript | duDialog

Simple materials concept dialogue extension (no jQuery required, no coding required).

duDialog is a pure JavaScript plugin for creating Material Design impressed alert, confirmation, and choice dialog popups with no dependencies.

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

Read More – 

Open Modal Dialog Popup Using JavaScript plugin | modal.js
Basic Popup And Modal Plugin With jQuery | stepframemodal


See Demo And Download

Official Website(dmuy): Click Here

This superior jQuery/javascript plugin is developed by dmuy. For extra Advanced Usage, please go to the official website.

Share