This time I will share jQuery Plugin and tutorial about Mobile-friendly jQuery Modal Dialog Plugin – sDialog, hope it will help you in programming stack.
| File Size: | 13.2 KB |
|---|---|
| Views Total: | 1350 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
sDialog is a simple yet powerful jQuery plugin that helps you create minimal, clean, responsive modal popups for confirm / alert dialog boxes and popup menus.
How to use it:
1. To use this plugin, you need to load jQuery and the sdialog.min.css & sdialog.min.js into the html page.
1 |
<link href="sdialog.min.css" rel="stylesheet"> |
2 |
<script src="jquery.min.js"></script> |
3 |
<script src="sdialog.min.js"></script> |
2. Create a confirmation dialog with ‘confirm’ and ‘cancel’ buttons.
01 |
$.sDialog({ |
02 |
skin: "block", |
03 |
content: "Are You Sure", |
04 |
okBtnText: "Okey", |
05 |
cancelBtnText: "Cancel", |
06 |
width: 250, |
07 |
okFn: function () { |
08 |
console.log("You just clicked Okey"); |
09 |
}, |
10 |
cancelFn: function () { |
11 |
console.log("You just clicked Cancel"); |
12 |
}, |
13 |
onDestroy: function () { |
14 |
console.log("destroy!"); |
15 |
} |
16 |
}); |
3. Create an Android toast-like alert popup.
1 |
$.sDialog({ |
2 |
skin: "green", |
3 |
content: "Success", |
4 |
"okBtn": false, |
5 |
"cancelBtn": false |
6 |
}); |
4. Create a generic dialog window.
1 |
$.sWindow({ |
2 |
title: "Dialog Title", |
3 |
content: 'Dialog Content', |
4 |
height: 330 |
5 |
}) |
5. Create a popup menu that slides in from the bottom of the webpage.
01 |
$.s<a href="https://www.jqueryscript.net/menu/">Menu</a>({ |
02 |
"menus": [ |
03 |
{ |
04 |
name: "Menu 1", class: "rf", onclick: function () { |
05 |
console.log("You just clicked Menu 1"); |
06 |
} |
07 |
}, |
08 |
{ |
09 |
name: "Menu 2", class: "rg", onclick: function () { |
10 |
console.log("You just clicked Menu 2"); |
11 |
} |
12 |
} |
13 |
], |
14 |
"okBtn": false, |
15 |
"cancelBtnText": "Cancel", |
16 |
"cancelFn": function () { |
17 |
console.log("You just clicked Cancel"); |
18 |
} |
19 |
}) |
6. Default options for the sDialog method.
01 |
// auto close after 2 seconds |
02 |
"autoTime": '2000', |
03 |
04 |
// skin name |
05 |
// 'block', 'green' or 'rred' |
06 |
"skin": 'block', |
07 |
08 |
// default content |
09 |
"content": "Error", |
10 |
11 |
// width of modal dialog |
12 |
"width": 250, |
13 |
14 |
// shows confirm button |
15 |
"okBtn": true, |
16 |
17 |
// shows cancel button |
18 |
"cancelBtn": true, |
19 |
20 |
// text for confirm button |
21 |
"okBtnText": "Confirm", |
22 |
23 |
// text for cancel button |
24 |
"cancelBtnText": "Cancel", |
25 |
26 |
// shows mask |
27 |
"lock": true, |
28 |
29 |
// callbacks |
30 |
"okFn": function () { }, |
31 |
"cancelFn": function () { }, |
32 |
"onDestroy": function () { } |
7. Default options for the sDialog method.
01 |
// popup title |
02 |
title: "Error", |
03 |
04 |
// popup content |
05 |
content: "Error", |
06 |
07 |
// height of popup |
08 |
height: 328, |
09 |
10 |
// callback |
11 |
callback: function () { }, |
12 |
13 |
// auto close after a specific timeout |
14 |
duration: 0 |
8. Default options for the sDialog method.
01 |
// custom menus |
02 |
"menus": "", |
03 |
04 |
// shows confirm button |
05 |
"okBtn": true, |
06 |
07 |
// shows cancel button |
08 |
"cancelBtn": true, |
09 |
10 |
// text for confirm button |
11 |
"okBtnText": "Confirm", |
12 |
13 |
// text for cancel button |
14 |
"cancelBtnText": "Cancel", |
15 |
16 |
// callbacks |
17 |
"okFn": function () { }, |
18 |
"cancelFn": function () { }, |
19 |
"onDestroy": function |
