Minimal Alert / Confirm Dialog Plugin with jQuery and Animate.css - dialog.js

dialog.js is an extremely simple jQuery plugin for creating a modal-like alert / confirm dialog box with support for callback function and CSS3 animations.

How to use it:

1. Place the jQuery dialog.js plugin after jQuery JavaScript library as shown below.

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

2. Load the animate.css for CSS3 animations.

<link rel="stylesheet" href="/path/to/animate.min.css">

3. Add custom html content to the dialog popup.

<div class="my-dialog-wrap">
  <div class="my-dialog-mask"></div>
  <div class="my-dialog animated">
    <div class="my-dialog-close">×</div>
    <div class="my-dialog-header">
      Dialog header
    </div>
    <div class="my-dialog-body">
      Dialog body
    </div>
    <div class="my-dialog-footer">
      <span type="cancel" class="my-dialog-btn">Cancel</span>
      <span type="ok" class="my-dialog-btn">Okey</span>
    </div>
  </div>
</div>

4. Display an alert dialog on the webpage.

dialog.alert({
  title: 'Warning!!!',
  inner: 'Are You Sure?',
  showType: 'slideInDown'
});

5. Display a confirm dialog with callbacks.

dialog.confirm({
  title: 'Warning!!!',
  inner: 'Are You Sure',
  ok: function(){
    // do something
  },
  showType: 'slideInDown'
});

6. Default plugin settings.

dialog.confirm({

  // dialog title
  title: 'Dialog Title',

  // dialog content
  inner: 'Dialog Content',

  // animation type
  // See more on https://daneden.github.io/animate.css/
  showType: 'slideInDown',

  // callbacks
  ok: $.noop,
  close: $.noop
  
});

---

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