Minimal Material Style Dialog Box Plugin For jQuery - msgBox.js

msgBox.js is a really lightweight (1kb minified) jQuery plugin which lets you create Material Design styled modal & dialog boxes with custom icons and callbacks.

How to use it:

1. Load the main style sheet jquery.msgBox.min.css to style the dialog box.

<link rel="stylesheet" href="jquery.msgBox.min.css">

2. Create an empty DIV element for the dialog box.

<div class="msgBox-testArea"></div>

3. Load jQuery library and the JavaScript file jquery.msgBox.min.js in the webpage when needed.

<script src="jquery.min.js"></script>
<script src="jquery.msgBox.min.js"></script>

4. The JavaScript to display the dialog box.

$('.msgBox-testArea').msgBox({
  title: 'Dialog Title',
  message: 'Custom Message'
});

5. Add custom buttons to the dialog box.

$('.msgBox-testArea').msgBox({
  title: 'Dialog Title',
  message: 'Custom Message',
  buttons: [{
    text: 'Show',
    callback: function() {
      // do something
    }
  },
  {
    text: 'Hide',
    callback: function() {
      // do something
    }
  }],
});

6. Apply fadeIn and fadeOut effects to the dialog box.

$('.msgBox-testArea').msgBox({
  title: 'Dialog Title',
  message: 'Custom Message',
  buttons: [{
    text: 'Show',
    callback: function() {
      // do something
    }
  },
  {
    text: 'Hide',
    callback: function() {
      // do something
    }
  }],
  blend: true,
  blendDuration: 400
});

7. Specify the icons displayed in the dialog box. Available types:

• check
• download
• exclamation
• info
• lock
• unlock
• play
• plus
• question
• remove
• stop

$('.msgBox-testArea').msgBox({
  type: 'question'
});

---

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