Animated Multi purpose Modal Box Plugin For jQuery - Download Animated Multi-purpose Modal Box Plugin For jQuery

Download Animated Multi-purpose Modal Box Plugin For jQuery

By Posted on

This time I will share jQuery Plugin and tutorial about Animated Multi-purpose Modal Box Plugin For jQuery, hope it will help you in programming stack.

Animated Multi purpose Modal Box Plugin For jQuery - Download Animated Multi-purpose Modal Box Plugin For jQuery
File Size: 19.1 KB
Views Total: 2255
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

A tiny and fast jQuery plugin to create animated & highly customizable modal dialog boxes for multiple purposes. E.g. alert, prompt, confirm, success, warning, info, error, etc.

How to use it:

1. Include the latest version of jQuery library from a CDN.

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

2. Include the jQuery modal plugin’s script and CSS in the document.

view source
1 <link href="css/jquery.modal.css" rel="stylesheet">
2 <script src="js/jquery.modal.min.js"></script>

3. Bind the click event on an element which allows you to trigger a modal box.

view source
1 $('a#alert').click(function(){
2 modal({
3   type  : 'alert',
4   title : 'Title',
5   text  : "Custom Message"
6   });
7 });

4. All the parameters.

view source
01 // alert | confirm | prompt | success | warning | error | info | primary | inverted
02 type  : 'default',
03  
04 // modal title
05 title : 'Title',
06  
07 // modal body
08 text  : 'It works.',
09  
10 // <a href="https://www.jqueryscript.net/tags.php?/Modal/">Modal</a> Size (normal | large | small)
11 size: 'normal',
12  
13 // modal buttons
14 buttons    : [{
15   text: 'OK', //Button Text
16   val: 'ok', //Button Value
17   eKey: true, //Enter Keypress
18  
19   //Button Classes (btn-large | btn-small | btn-green | btn-light-green | btn-purple | btn-orange | btn-pink | btn-turquoise | btn-blue | btn-light-blue | btn-light-red | btn-red | btn-yellow | btn-white | btn-black | btn-rounded | btn-circle | btn-square | btn-disabled)
20   addClass: 'btn-light-blue',
21   onClick: function(dialog) {
22     console.log(dialog);
23     alert('Look in console!');
24     return true;
25   }
26 }, ],
27  
28 // always centered on your screen
29 center: true,
30  
31 // auto close modal
32 autoclose  : false,
33  
34 // fire a function after modal closes
35 callback   : null,
36  
37 // onShow function
38 onShow: function(e){console.log(e);},
39  
40 // click the overlay to close the modal
41 closeClick : true,
42  
43 // whether closable or not
44 closable   : true,
45  
46 // Modal Custom Theme (xenon | atlant | reseted)
47 theme : 'default',
48  
49 // background color
50 background : 'rgba(0,0,0,0.5)',
51  
52 // z-index property
53 zIndex: 1050,
54  
55 // custom text for alert, confirm and prompt modals
56 buttonText : {ok:'OK',yes:'Yes',cancel:'Cancel'},
57  
58 // custom modal template
59 template   : '<div class="modal-box"><div class="modal-title"><a class="modal-close-btn"></a></div><div class="modal-text"></div><div class="modal-buttons"></div></div>',
60  
61 // an object with each class name from modal box
62 _classes   : {box:'.modal-box', title:'.modal-title', content:'.modal-text', buttons:'.modal-buttons', closebtn:'.modal-close-btn'}

Change logs:

2015-08-28

  • Update jquery.modal.css

2015-06-10

  • The onShow now called after the dialog is displayed (end of fadein) so DOM elements from your dialog are accessible from your onShow callback

2015-04-10

  • v1.2.3

2015-04-09

  • Update jquery.modal.css
  • Added unminified version.

2015-03-19

  • Update jquery.modal.css

2015-03-18

  • Update jquery.modal.min.js

2015-01-20

  • v1.2.1

2015-01-19

  • update.

2014-10-23

  • Added a new theme: atlant.

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

source : jqueryscript.net

Related posts: