jQuery Modal Dialog Plugin For Material Design Lite

A lightweight and multi-functional jQuery plugin used to create modal windows, dialog popups and loading overlays for Material Design Lite (MDL).

How to use it:

1. Add the required Material Design Lite's files to your html page.

<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.5/material.indigo-pink.min.css">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.5/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

2. Add jQuery library and the jQuery MDL Modal Dialog plugin's files to the html page.

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" href="mdl-jquery-modal-dialog.css">
<script src="mdl-jquery-modal-dialog.js"></script>

3. Display a default modal dialog on your web page.

showDialog({
  title: 'Title',
  text: 'Text to show'
})

4. Display a dialog box with custom actions buttons.

showDialog({
  title: 'Action',
  text: 'Text to display',
  negative: {
      title: 'Nope'
  },
  positive: {
      title: 'Yay',
      onClick: function (e) {
          alert('Action performed!');
      }
  }
});

6. Display a loading overlay on the webpage.

showLoading();
setTimeout(function () {
  hideLoading(); // auto hide
}, 3000);

7. All configuration options.

// id of modal dialog
id: 'orrsDiag',

// modal title
title: null,

// text to display
text: null,

// for action buttons
negative: false,
positive: false,

// set to false to make the modal dialog only be closed by using action buttons
cancelable: true,

// additional CSS styles appended to the modal
contentStyle: null,

// callback function
onLoaded: false,

// neutral button
neutral: false,

// auto hide other modal windows
hideOther: true

Change log:

2017-03-23

• Added options.onHidden to be used as a callback for the hideDialog() function

2016-11-07

• Added support for a neutral button

---

This awesome jQuery plugin is developed by oRRs. For more Advanced Usages, please check the demo page or visit the official website.