Simple Flexible jQuery Dialog Popup Plugin - dialogBox

File Size: 11.6 KB
Views Total: 26877
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="//"></script>
<script src="js/jquery.dialogBox.js"></script>

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


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:


  • fixed setting bug


  • add a callback when close dialog


  • fix single text appear word wrap bug


  • fixed confirm button


  • fix for IE 7/8.


  • add marginheight and marginwidth to iframe


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


  • improvement for ajax operation.


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


  • refactor.


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


  • 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.