xxxxxxxxxx
1
<button class="btn btn-primary" type="button" id="btn1" >
2
show modal
3
</button>
1
1
xxxxxxxxxx
1
var modalWrap = null;
2
const showModal = (title, description, yesBtnLabel = 'Yes', noBtnLabel = 'Cancel', callback) => {
3
if (modalWrap !== null) {
4
modalWrap.remove();
5
}
6
7
modalWrap = document.createElement('div');
8
modalWrap.innerHTML = `
9
<div class="modal fade" tabindex="-1">
10
<div class="modal-dialog">
11
<div class="modal-content">
12
<div class="modal-header bg-light">
13
<h5 class="modal-title">${title}</h5>
14
<button type="button" class="btn-close" data-mdb-dismiss="modal" aria-label="Close"></button>
15
</div>
16
<div class="modal-body">
17
<div class="form-outline mb-3">
18
<input
19
type="text"
20
class="form-control"
21
id="datatable-search-input"
22
/>
23
<label class="form-label" for="datatable-search-input">Search</label>
24
</div>
25
<p>${description}</p>
26
</div>
27
<div class="modal-footer bg-light">
28
<button type="button" class="btn btn-secondary" data-mdb-dismiss="modal">${noBtnLabel}</button>
29
<button type="button" class="btn btn-primary modal-success-btn" data-mdb-dismiss="modal">${yesBtnLabel}</button>
30
</div>
31
</div>
32
</div>
33
</div>
34
`;
35
36
modalWrap.querySelector('.modal-success-btn').onclick = callback;
37
38
document.body.append(modalWrap);
39
40
var modal = new mdb.Modal(modalWrap.querySelector('.modal'),{});
41
modal.show();
42
}
43
44
45
document.getElementById('btn1').onclick = () => showModal('show modal', 'the styling is not applied to search text box?', "Yes", "No", () => {
46
console.log('hello world');
47
});
Console errors: 0