-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtoast.html
63 lines (57 loc) · 2.08 KB
/
toast.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Belajar Bootstrap</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
</head>
<body>
<div class="toast-container position-fixed top-0 end-0 p-3">
<div id="liveToast" class="toast text-bg-primary" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
<div id="liveToast2" class="toast text-bg-danger" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-body">
Hello, world! This is a toast message.
<div class="mt-2 pt-2 border-top">
<button type="button" class="btn btn-primary btn-sm">Take action</button>
<button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Close</button>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col">
<h1>Toast</h1>
</div>
</div>
<div class="row">
<div class="col">
<button id="liveToastBtn" class="btn btn-primary">Show Notification</button>
</div>
</div>
</div>
<script src="bootstrap/js/bootstrap.bundle.js"></script>
<script>
const toastTrigger = document.getElementById('liveToastBtn')
const toastLiveExample = document.getElementById('liveToast')
const toastLiveExample2 = document.getElementById('liveToast2')
if (toastTrigger) {
const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample)
const toastBootstrap2 = bootstrap.Toast.getOrCreateInstance(toastLiveExample2)
toastTrigger.addEventListener('click', () => {
toastBootstrap.show()
toastBootstrap2.show()
})
}
</script>
</body>
</html>