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

Minimal Material Style Dialog Box Plugin For jQuery - msgBox.js
File Size: 31.2 KB
Views Total: 2733
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.