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

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.