xxxxxxxxxx
1
<br>
2
<!-- Trigger buttons -->
3
<button type="button" class="btn btn-primary" id="basic-primary-trigger">Primary</button>
4
<button type="button" class="btn btn-secondary" id="basic-secondary-trigger">
5
Secondary
6
</button>
7
<button type="button" class="btn btn-success" id="basic-success-trigger">Success</button>
8
<button type="button" class="btn btn-danger" id="basic-danger-trigger">Danger</button>
9
<button type="button" class="btn btn-warning" id="basic-warning-trigger">Warning</button>
10
<button type="button" class="btn btn-info" id="basic-info-trigger">Info</button>
11
<button type="button" class="btn btn-light" id="basic-light-trigger">Light</button>
12
<button type="button" class="btn btn-dark" id="basic-dark-trigger">Dark</button>
13
<!-- Toasts -->
14
<div
15
class="toast fade mx-auto"
16
id="basic-primary-example"
17
role="alert"
18
aria-live="assertive"
19
aria-atomic="true"
20
data-mdb-autohide="true"
21
data-mdb-delay="5000"
22
data-mdb-position="top-right"
23
data-mdb-append-to-body="true"
24
data-mdb-stacking="true"
25
data-mdb-width="350px"
26
data-mdb-color="primary"
27
>
28
<div class="toast-header text-white">
29
<strong class="me-auto">MDBootstrap</strong>
30
<small>11 mins ago</small>
31
<button type="button" class="btn-close btn-close-white" data-mdb-dismiss="toast" aria-label="Close"></button>
32
</div>
33
<div class="toast-body text-white">Primary Basic Example</div>
34
</div>
35
<div
36
class="toast fade mx-auto"
37
id="basic-secondary-example"
38
role="alert"
39
aria-live="assertive"
40
aria-atomic="true"
41
data-mdb-autohide="true"
42
data-mdb-delay="1000"
43
data-mdb-position="top-right"
44
data-mdb-append-to-body="true"
45
data-mdb-stacking="true"
46
data-mdb-width="350px"
47
data-mdb-color="secondary"
48
>
49
<div class="toast-header text-white">
50
<strong class="me-auto">MDBootstrap</strong>
51
<small>11 mins ago</small>
52
<button type="button" class="btn-close btn-close-white" data-mdb-dismiss="toast" aria-label="Close"></button>
53
</div>
54
<div class="toast-body text-white">Secondary Basic Example</div>
55
</div>
56
<div
57
class="toast fade mx-auto"
58
id="basic-success-example"
59
role="alert"
60
aria-live="assertive"
61
aria-atomic="true"
62
data-mdb-autohide="true"
63
data-mdb-delay="6000"
64
data-mdb-position="top-right"
65
data-mdb-append-to-body="true"
66
data-mdb-stacking="true"
67
data-mdb-width="350px"
68
data-mdb-color="success"
69
>
70
<div class="toast-header text-white">
71
<strong class="me-auto">MDBootstrap</strong>
72
<small>11 mins ago</small>
73
<button type="button" class="btn-close btn-close-white" data-mdb-dismiss="toast" aria-label="Close"></button>
74
</div>
75
<div class="toast-body text-white">Success Basic Example</div>
76
</div>
77
<div
78
class="toast fade mx-auto"
79
id="basic-danger-example"
80
role="alert"
81
aria-live="assertive"
82
aria-atomic="true"
83
data-mdb-autohide="true"
84
data-mdb-delay="500"
85
data-mdb-position="top-right"
86
data-mdb-append-to-body="true"
87
data-mdb-stacking="true"
88
data-mdb-width="350px"
89
data-mdb-color="danger"
90
>
91
<div class="toast-header text-white">
92
<strong class="me-auto">MDBootstrap</strong>
93
<small>11 mins ago</small>
94
<button type="button" class="btn-close btn-close-white" data-mdb-dismiss="toast" aria-label="Close"></button>
95
</div>
96
<div class="toast-body text-white">Danger Basic Example</div>
97
</div>
98
<div
99
class="toast fade mx-auto"
100
id="basic-warning-example"
101
role="alert"
102
aria-live="assertive"
103
aria-atomic="true"
104
data-mdb-autohide="true"
105
data-mdb-delay="2000"
106
data-mdb-position="top-right"
107
data-mdb-append-to-body="true"
108
data-mdb-stacking="true"
109
data-mdb-width="350px"
110
data-mdb-color="warning"
111
>
112
<div class="toast-header text-white">
113
<strong class="me-auto">MDBootstrap</strong>
114
<small>11 mins ago</small>
115
<button type="button" class="btn-close btn-close-white" data-mdb-dismiss="toast" aria-label="Close"></button>
116
</div>
117
<div class="toast-body text-white">Warning Basic Example</div>
118
</div>
119
<div
120
class="toast fade mx-auto"
121
id="basic-info-example"
122
role="alert"
123
aria-live="assertive"
124
aria-atomic="true"
125
data-mdb-autohide="true"
126
data-mdb-delay="4000"
127
data-mdb-position="top-right"
128
data-mdb-append-to-body="true"
129
data-mdb-stacking="true"
130
data-mdb-width="350px"
131
data-mdb-color="info"
132
>
133
<div class="toast-header text-white">
134
<strong class="me-auto">MDBootstrap</strong>
135
<small>11 mins ago</small>
136
<button type="button" class="btn-close btn-close-white" data-mdb-dismiss="toast" aria-label="Close"></button>
137
</div>
138
<div class="toast-body text-white">Info Basic Example</div>
139
</div>
140
<div
141
class="toast fade mx-auto"
142
id="basic-light-example"
143
role="alert"
144
aria-live="assertive"
145
aria-atomic="true"
146
data-mdb-autohide="true"
147
data-mdb-delay="200"
148
data-mdb-position="top-right"
149
data-mdb-append-to-body="true"
150
data-mdb-stacking="true"
151
data-mdb-width="350px"
152
data-mdb-color="light"
153
>
154
<div class="toast-header">
155
<strong class="me-auto">MDBootstrap</strong>
156
<small>11 mins ago</small>
157
<button type="button" class="btn-close" data-mdb-dismiss="toast" aria-label="Close"></button>
158
</div>
159
<div class="toast-body">Light Basic Example</div>
160
</div>
161
<div
162
class="toast fade mx-auto"
163
id="basic-dark-example"
164
role="alert"
165
aria-live="assertive"
166
aria-atomic="true"
167
data-mdb-autohide="true"
168
data-mdb-delay="10000"
169
data-mdb-position="top-right"
170
data-mdb-append-to-body="true"
171
data-mdb-stacking="true"
172
data-mdb-width="350px"
173
data-mdb-color="dark"
174
>
175
<div class="toast-header text-white">
176
<strong class="me-auto">MDBootstrap</strong>
177
<small>11 mins ago</small>
178
<button type="button" class="btn-close btn-close-white" data-mdb-dismiss="toast" aria-label="Close"></button>
179
</div>
180
<div class="toast-body text-white">Dark Basic Example</div>
181
</div>
1
1
xxxxxxxxxx
1
const toasts = [ 'basic-primary-example',
2
'basic-secondary-example',
3
'basic-success-example',
4
'basic-danger-example',
5
'basic-warning-example',
6
'basic-info-example',
7
'basic-light-example',
8
'basic-dark-example',
9
];
10
11
const triggers = [
12
'basic-primary-trigger',
13
'basic-secondary-trigger',
14
'basic-success-trigger',
15
'basic-danger-trigger',
16
'basic-warning-trigger',
17
'basic-info-trigger',
18
'basic-light-trigger',
19
'basic-dark-trigger',
20
];
21
22
triggers.forEach((trigger, index) => {
23
let basicInstance = mdb.Toast.getInstance(document.getElementById(toasts[index]));
24
document.getElementById(trigger).addEventListener('click', () => {
25
basicInstance.show();
26
});
27
});
Console errors: 0