This time I will share jQuery Plugin and tutorial about Easy Customizable jQuery Alert Popup Plugin – jzAlert, hope it will help you in programming stack.
| File Size: | 9.58 KB |
|---|---|
| Views Total: | 668 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
jzAlert is a small yet highly customizable jQuery/Zepto popup plugin which lets you create modal-style alert or confirm dialog boxes with minimal effort.
Key features:
- Replaces the default JS alert or confirm popup boxes.
- Lots of customization options and callbacks.
- Click anywhere on the background to close the popup.
- Easy to style.
- Auto dismisses after a specific timeout.
How to use it:
1. Include jQuery library (or Zepto.js) and the jQuery jzAlert plugin at the bottom of the webpage.
1 |
<script src="//code.jquery.com/jquery.min.js"></script> |
2 |
<!-- <script src="zepto.min.js"></script>--> |
3 |
<script src="jz.126.alert.min.js"></script> |
2. Show a default alert box on the webpage.
1 |
$.alert(SETTINGS); |
3. All configuration options and callbacks. You can pass the parameters as displayed below as an object to the $.alert function.
01 |
$.alert({ |
02 |
03 |
// callback before alert is opened |
04 |
showBeforeFn: function() {}, |
05 |
06 |
// backback after alert box is opened |
07 |
showAfterFn: function() {}, |
08 |
09 |
// callback before closing the alert box by clicing on the 'close' button |
10 |
closeBeforeFn: function(index) {}, |
11 |
12 |
// callback after clicing on the 'close' button |
13 |
closeAfterFn: function(index) {}, |
14 |
15 |
// click on the background to close |
16 |
alertBgClickClose: false, |
17 |
18 |
// callback before closing the alert box by clicing on the background |
19 |
bgCloseBeforeFn: function() {}, |
20 |
21 |
// callback after clicing on the background |
22 |
bgCloseAfterFn: function() {}, |
23 |
24 |
// Custom CSS styles |
25 |
css: { |
26 |
//$(".site-alert-container").css(containerCss); |
27 |
containerCss: {}, |
28 |
//$(".site-alert-container").find(".site-alert-content").css(contentCss); |
29 |
contentCss: { |
30 |
// width:"90%" |
31 |
}, |
32 |
//$(".site-alert-container").find(".site-alert-head").css(headCss); |
33 |
headCss: {}, |
34 |
//$(".site-alert-container").find(".site-alert-body").css(bodyCss); |
35 |
bodyCss: {}, |
36 |
//$(".site-alert-container").find(".site-alert-foot").css(footCss); |
37 |
footCss: {}, |
38 |
//$(".site-alert-container").find(".site-alert-headFoot").css(headFootCss); |
39 |
headFootCss: {}, |
40 |
//$(".site-alert-container").find("*").css(allCss); |
41 |
allCss: {}, |
42 |
//$(".site-alert-container").find(".site-alert-contentAll").css(contentAllCss); |
43 |
contentAllCss: {}, |
44 |
// $(".site-alert-container").find(".site-alert-btn").css(btnCss); |
45 |
btnCss: {}, |
46 |
}, |
47 |
48 |
49 |
// width |
50 |
alertWidth: "60%", |
51 |
52 |
// border radius |
53 |
alertBorderRadius: "5px", |
54 |
55 |
// border color |
56 |
alertLineColor: "#ccc", |
57 |
58 |
// alert title |
59 |
alertTitleStr: "Alert Title", |
60 |
61 |
// alert content |
62 |
alertBodyStr: "Alert Content", |
63 |
64 |
// alert buttons |
65 |
alertBtns: [{ text: "Confirm", klass: "site-alert-btn-ok" }], |
66 |
67 |
// top position |
68 |
top: false, |
69 |
70 |
// top offset |
71 |
offsetTop: 0, |
72 |
73 |
// animation speed |
74 |
delay: "fast", |
75 |
76 |
// opacity for overlay |
77 |
opacity: "0.75", |
78 |
79 |
// show alert header |
80 |
alertIsShowHead: false, |
81 |
82 |
// show alert footer |
83 |
alertIsHideFoot: false, |
84 |
85 |
// timeout for auto close |
86 |
timeout: false, |
87 |
88 |
}); |
This awesome jQuery plugin is developed by menghan126. For more Advanced Usages, please check the demo page or visit the official website.
source : jqueryscript.net
