Simple Flexible jQuery Dialog Popup Plugin - dialogBox

File Size: 11.6 KB
Views Total: 26819
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Simple Flexible jQuery Dialog Popup Plugin - dialogBox

Just another jQuery dialog box plugin which provides a simple way to display popup / modal windows with a plenty of options for animations and custom styles.

More features:

  • Auto close after a timeout.
  • 7 built-in animation types: fade,newspaper,fall,scaled,flip-horizontal,flip-vertical,sign
  • Adaptive content for responsive web layout.
  • Confirm / cancel callback functions.
  • Optional fullscreen mask layers.
  • Supports inline elements or external data sources.
  • 3 types of dialog boxes: normal, confirm, error.

How to use it:

1. Include the jQuery dialogBox plugin's stylesheet in the head section of the document.

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

2. Create a button input to trigger a dialog box.

<input type="button" value="click" id="btnDialog">

3. Create an empty element for the dialog box.

<div id="dialog"></div>

4. Include the jQuery dialogBox plugin's script after jQuery library.

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="js/jquery.dialogBox.js"></script>

5. Display a basic dialog box as you click on the trigger button.

$('#btnDialog').click(function(){
  $('#dialog').dialogBox({
    //OPTIONS
  })
})

6. Configuration options.

// the width/height of the dialog box.
width: null, 
height: null,  

// enable adaptive content
autoSize: true, 

// auto close after a timeout.
// requires 'time' option
autoHide: false, 

// timeout for auto close
time: 3000, 

// z-index
zIndex: 99999, 

// display a fullscreen mask layer
hasMask: false,  

// display a close button
hasClose: false,

// display confirm/cancel buttons
hasBtn: false, 

// confirm button text
confirmValue: null, 

// confirm callback
confirm: function(){},

// cancel button text
cancelValue: null,  

// cancel callback
cancel: function(){}, 

// fade,newspaper,fall,scaled,flip-horizontal,flip-vertical,sign,
effect: '',

// the type of your dialog box
// normal, error, correct (confirm dialog)
type: '', 

// custom dialog title
title: '',  

// custom dialog content
// strings or an exteral URL
content: '',

// Callback functions
callback: function(){},
close: function(){}

Change logs:

2015-10-22

  • fixed setting bug

2015-07-17

  • add a callback when close dialog

2015-06-19

  • fix single text appear word wrap bug

2015-06-03

  • fixed confirm button

2015-05-20

  • fix for IE 7/8.

2015-05-14

  • add marginheight and marginwidth to iframe

2015-05-13

  • add content resource DOM object and jQuery object description
  • add callback.

2015-05-11

  • improvement for ajax operation.

2015-05-06

  • fix dialogBox margin-top size when it's set auto size

2015-05-05

  • refactor.

2015-05-04

  • fix dialogBox can't vertical center when it's auto size
  • fix dialogBox margin-top size when it's setting auto size

2015-04-28

  • Fixed: can not popup new dialogs.
  • Fixed: auto height bug

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