Simple Flexible jQuery Dialog Popup Plugin dialogBox - Download Simple Flexible jQuery Dialog Popup Plugin - dialogBox

Download Simple Flexible jQuery Dialog Popup Plugin – dialogBox

By Posted on

This time I will share jQuery Plugin and tutorial about Simple Flexible jQuery Dialog Popup Plugin – dialogBox, hope it will help you in programming stack.

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

Demo Download

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.

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

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

view source
1 <input type="button" value="click" id="btnDialog">

3. Create an empty element for the dialog box.

view source
1 <div id="dialog"></div>

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

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

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

view source
1 $('#btnDialog').click(function(){
2   $('#dialog').dialogBox({
3     //OPTIONS
4   })
5 })

6. Configuration options.

view source
01 // the width/height of the dialog box.
02 width: null,
03 height: null, 
04  
05 // enable adaptive content
06 autoSize: true,
07  
08 // auto close after a timeout.
09 // requires 'time' option
10 autoHide: false,
11  
12 // timeout for auto close
13 time: 3000,
14  
15 // z-index
16 zIndex: 99999,
17  
18 // display a fullscreen mask layer
19 hasMask: false, 
20  
21 // display a close button
22 hasClose: false,
23  
24 // display confirm/cancel buttons
25 hasBtn: false,
26  
27 // confirm button text
28 confirmValue: null,
29  
30 // confirm callback
31 confirm: function(){},
32  
33 // cancel button text
34 cancelValue: null, 
35  
36 // cancel callback
37 cancel: function(){},
38  
39 // fade,newspaper,fall,scaled,flip-horizontal,flip-vertical,sign,
40 effect: '',
41  
42 // the type of your dialog box
43 // normal, error, correct (confirm dialog)
44 type: '',
45  
46 // custom dialog title
47 title: '', 
48  
49 // custom dialog content
50 // strings or an exteral URL
51 content: '',
52  
53 // Callback functions
54 callback: function(){},
55 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.

source : jqueryscript.net

Related posts: