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

File Size: 4.61 KB
Views Total: 3194
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></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 class="my-dialog-body">
      Dialog body
    <div class="my-dialog-footer">
      <span type="cancel" class="my-dialog-btn">Cancel</span>
      <span type="ok" class="my-dialog-btn">Okey</span>

4. Display an alert dialog on the webpage.

  title: 'Warning!!!',
  inner: 'Are You Sure?',
  showType: 'slideInDown'

5. Display a confirm dialog with callbacks.

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

6. Default plugin settings.


  // dialog title
  title: 'Dialog Title',

  // dialog content
  inner: 'Dialog Content',

  // animation type
  // See more on
  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.