xxxxxxxxxx
1
<!-- Button trigger modal -->
2
<button
3
type="button"
4
class="btn btn-primary"
5
data-mdb-toggle="modal"
6
data-mdb-target="#exampleModal"
7
>
8
Launch demo modal
9
</button>
10
11
<!-- Modal -->
12
<div
13
class="modal fade"
14
id="exampleModal"
15
tabindex="-1"
16
aria-labelledby="exampleModalLabel"
17
aria-hidden="true"
18
>
19
<div class="modal-dialog">
20
<div class="modal-content">
21
<div class="modal-header">
22
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
23
<button
24
type="button"
25
class="btn-close"
26
data-mdb-dismiss="modal"
27
aria-label="Close"
28
></button>
29
</div>
30
<div class="modal-body">
31
<img class="w-100">
32
</div>
33
<div class="modal-footer">
34
<button type="button" class="btn btn-secondary" data-mdb-dismiss="modal">
35
Close
36
</button>
37
<button type="button" class="btn btn-primary">Save changes</button>
38
</div>
39
</div>
40
</div>
41
</div>
1
1
xxxxxxxxxx
1
const img1 = document.querySelector('img')
2
3
const myModalEl = document.getElementById('exampleModal')
4
myModalEl.addEventListener('shown.mdb.modal', (event) => {
5
img1.setAttribute('src', 'https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20(55).jpg')
6
})
Console errors: 0