Tiny Multipurpose Dialog Popup Plugin With jQuery - dialogbox.js

A simple tiny jQuery dialog box enhancement plugin which lets you create animated, clean-looking, draggable alert/confirm dialog windows, iframe modals and toast-style notification messages.

How to use it:

1. Load the core stylesheet dialogbox.css in the head section of the html document.

<link rel="stylesheet" href="css/dialogbox.css">

2. Load the JavaScript dialogbox.js along with the latest jQuery library at the end of the document.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="js/dialogbox.js"></script>

3. Create a default information dialog box.

var data = '<div style="padding:20px;">Dialog Content</div>';
$.dialogbox({
  type:'default',
  title:'Dialog Title',
  content:data
});

4. Create an alert dialog box with a confirm button.

$.dialogbox({
  type:'msg',
  title:'Alert Title',
  icon:1,
  content:'Alert Content',
  btn:['Confirm']
});

5. Create a confirmation dialog with custom actions buttons and callbacks.

$.dialogbox({
  type:'msg',
  title:'Confirm Title',
  content:'Are You Sure?',
  closeBtn:true,
  btn:['Confirm','Cancel'],
  call:[
    function(){
      $.dialogbox.close(); 
    },
    function(){
      $.dialogbox.close(); 
    }
  ]
});

6. Create a draggable iframe dialog.

$.dialogbox({
  type:'iframe',
  title:'Google',
  content:'Google.com',
  url:'https://www.google.com',
  width:900,
  height:650
});

7. Create an Android-style toast message that will auto dismiss after 2 seconds.

$.dialogbox.prompt({
  content:'Success',
  time:2000 
});

8. All default options and callbacks.

$.dialogbox({

  // msg || iframe || default 
  type:'msg',  

  // dialog title
  title:'Dialog Title',

  // dialog content
  content:'Are You Sure',

  // iframe url
  url:'dialogbox_table.html',

  // width / height of the iframe
  width:750,//iframe 
  height:380,//iframe 

  // addtional classname for the iframe
  klass:'class-name',

  // opacity of the background overlay
  overlayOpacity:'0',

  // time to auto-close the dialog 
  time:3000 

  // 0: alert icon
  // 1: confirm dialog
  icon:'0',

  // array of buttons
  btn:['Okey','Cancel'],

  call:[function(){
    // callback for button 1
  },function(){
    // callback for button2
  }],

  // close callback
  closeCallback:function(){}
  
});

Change log:

2017-01-06

• Code improvement

---

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