This time I will share jQuery Plugin and tutorial about jQuery Plugin To Replace Native JS Popup Boxes – MessageBox, hope it will help you in programming stack.
| File Size: | 71.6 KB |
|---|---|
| Views Total: | 8721 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
Just another jQuery based JS popup box replacement which enables you to create alert / confirm / prompt dialog boxes with custom styles & animations.
How to use it:
1. Include references to jQuery library and the jQuery Message Box plugin’s JavaScript & CSS in your webpage as following:
1 |
<link href="src/messagebox.css" rel="stylesheet"> |
2 |
<script src="//code.jquery.com/jquery.min.js"></script> |
3 |
<script src="src/messagebox.js"></script> |
2. Create a dialog box to replace the Javascript’s window.alert() function.
1 |
$.MessageBox("Alert Message Here"); |
3. Create a dialog box to replace the Javascript’s window.confirm() function.
1 |
$.MessageBox({ |
2 |
buttonDone : "Yes", |
3 |
buttonFail : "No", |
4 |
message : "Are You Sure?" |
5 |
}).done(function(){ |
6 |
$.MessageBox("You clicked Yes."); |
7 |
}).fail(function(){ |
8 |
$.MessageBox("You clicked No."); |
9 |
}); |
4. Create a dialog box to replace the Javascript’s window.prompt() function.
01 |
$.MessageBox({ |
02 |
input : true, |
03 |
message : "What's your name?" |
04 |
}).done(function(data){ |
05 |
if ($.trim(data)) { |
06 |
$.MessageBox("Hi <b>"+data+"</b>!"); |
07 |
} else { |
08 |
$.MessageBox("You are shy, aren't you?"); |
09 |
} |
10 |
}); |
5. Create custom Done & Fail buttons.
01 |
$.MessageBox({ |
02 |
buttonDone: { |
03 |
one: { |
04 |
text: "1 - Nice", |
05 |
customClass: "your-class", |
06 |
keyCode : [49, 97] |
07 |
}, |
08 |
two: { |
09 |
text : "2 - Super", |
10 |
keyCode : [50, 98] |
11 |
}, |
12 |
three: { |
13 |
text: "3 - Great", |
14 |
keyCode : [51, 99] |
15 |
} |
16 |
}, |
17 |
buttonFail: { |
18 |
zero: { |
19 |
text: "0 - Meh", |
20 |
keyCode: [48, 96] |
21 |
}, |
22 |
}, |
23 |
buttonsOrder: "fail done", |
24 |
message: "How do you like it?<br>Click a button or press keys 0 to 3 on your keyboard:" |
25 |
}) |
6. Trigger functions when the user clicks the Done or Fail buttons.
1 |
$.MessageBox({ |
2 |
// options here |
3 |
}).done(function(data, button){ |
4 |
console.log("Handler: .done()"); |
5 |
console.log("Button: " + button); |
6 |
}).fail(function(data, button){ |
7 |
console.log("Handler: .fail()"); |
8 |
console.log("Button: " + button); |
9 |
}); |
7. Full plugin options to create a custom dialog box.
01 |
// the specified text that triggers the .done() handler |
02 |
buttonDone: "OK", |
03 |
04 |
// the specified text that triggers the .fail() handler |
05 |
buttonFail: undefined, |
06 |
07 |
// buttons order |
08 |
buttonsOrder: "done fail", |
09 |
10 |
// custom CSS classes |
11 |
customClass: "", |
12 |
13 |
// custom CSS classes for the overlay |
14 |
customOverlayClass: "", |
15 |
16 |
/* show input field |
17 |
e.g. |
18 |
{ |
19 |
name : { |
20 |
type : "text" // String |
21 |
label : undefined // String |
22 |
title : undefined // String |
23 |
defaultValue : undefined // String/Boolean |
24 |
customClass : undefined // String |
25 |
autotrim : true // Boolean - Only applicable to type == "text", "password" and "textarea" |
26 |
maxlength : undefined // Integer - Only applicable to type == "text", "password" and "textarea" |
27 |
message : undefined // String - Only applicable to type == "caption" |
28 |
options : {"" : " "} // Object/Array - Only applicable to type == "select" |
29 |
resize : false // Boolean - Only applicable to type == "textarea" |
30 |
rows : undefined // Integer - Only applicable to type == "textarea" |
31 |
htmlAttributes : {} // Object - Only applicable to type == "text", "password", "<a href="https://www.jqueryscript.net/time-clock/">date</a>", "time", "number", "color" and "email" |
32 |
}, |
33 |
... |
34 |
} |
35 |
*/ |
36 |
input: false, |
37 |
38 |
// plain text or html elements |
39 |
message: "", |
40 |
41 |
// the MessageBox has to be placed in the queue after the other MessageBoxes already created |
42 |
queue: true, |
43 |
44 |
// animation speed |
45 |
speed: 200, |
46 |
47 |
// title |
48 |
title: "", |
49 |
