This time I will share jQuery Plugin and tutorial about Creating Dynamic Bootstrap Modals In jQuery – ExtendedBootstrapModal, hope it will help you in programming stack.
| File Size: | 12.1 KB |
|---|---|
| Views Total: | 1274 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
Just another jQuery plugin to extend the Bootstrap modal component that makes it easy to create flexible, dynamic, complex modal windows in pure JavaScript.
How to use it:
1. To get started, you must have jQuery library and Bootstrap framework are loaded properly in the document.
1 |
<!-- Import Jquery --> |
2 |
<script src="jquery.min.js"></script> |
3 |
4 |
<!-- Import Bootstrap --> |
5 |
<script src="bootstrap.min.js"></script> |
6 |
<link href="bootstrap.min.css" rel="stylesheet"> |
2. Download the plugin and then insert the JavaScript file extendedBootstrapModal.js after jQuery library.
1 |
<!-- Import Extended bootstrap modal plugin --> |
2 |
<script src="extendedBootstrapModal.js"></script> |
3. Create a basic modal window with just one line of JavaScript.
1 |
ExtendedBoostrapModal('A Basic Modal Window.'); |
4. Change the default theme of the modal window.
1 |
ExtendedBoostrapModal('A Basic Modal Window.',{ |
2 |
state: 'success' // warning, danger, info, primary |
3 |
}); |
5. Create a complex, dynamic form modal:
01 |
ExtendedBoostrapModal({ |
02 |
autoload: true, |
03 |
id: 'my-modal', |
04 |
title: 'Sample modal', |
05 |
addForm: { |
06 |
id: 'form_id', |
07 |
name: 'form_name', |
08 |
inputs: { |
09 |
label: 'textInput', |
10 |
list: [ |
11 |
{ |
12 |
id: 'input_id', |
13 |
name: 'input_name', |
14 |
type: 'text', |
15 |
value: '', |
16 |
placeholder: 'my text input' |
17 |
} |
18 |
] |
19 |
}, |
20 |
buttons: [ |
21 |
{ |
22 |
value: 'Cancel', |
23 |
type: 'button' |
24 |
}, |
25 |
{ |
26 |
name: 'btn_add', |
27 |
value: 'Vali<a href="https://www.jqueryscript.net/time-clock/">date</a>', |
28 |
type : 'button', |
29 |
class: 'btn-success', |
30 |
callback: 'my_callback_fct', |
31 |
arguments : ['arg1', 'arg2'] |
32 |
} |
33 |
], |
34 |
radios : { |
35 |
label : 'radios', |
36 |
list: [ |
37 |
{ |
38 |
name: 'radio_name', |
39 |
value: 'choice_1', |
40 |
content: 'Choice 1' |
41 |
}, |
42 |
{ |
43 |
name: 'radio_name', |
44 |
value: 'choice_2', |
45 |
content: 'Choice 2' |
46 |
} |
47 |
] |
48 |
}, |
49 |
checkboxs : { |
50 |
label : 'checkboxs', |
51 |
list: [ |
52 |
{ |
53 |
name: 'check1', |
54 |
content: 'Choice 1' |
55 |
}, |
56 |
{ |
57 |
name: 'check2', |
58 |
content: 'Choice 2' |
59 |
} |
60 |
] |
61 |
}, |
62 |
selects: { |
63 |
label : 'selects', |
64 |
list : [ |
65 |
{ |
66 |
name:"myList", |
67 |
options : [ |
68 |
{ |
69 |
name: 'opt1', |
70 |
value: 'Option 1' |
71 |
}, |
72 |
{ |
73 |
name: 'opt2', |
74 |
value: 'Option 2', |
75 |
selected: true |
76 |
}, |
77 |
], |
78 |
} |
79 |
] |
