Bootstrap Delete Confirmation Modal snippet

1
2<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round">
3<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
4<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
5<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
6<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
7<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
8<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
9<style>
10body {
11	font-family: 'Varela Round', sans-serif;
12}
13.modal-confirm {		
14	color: #636363;
15	width: 400px;
16}
17.modal-confirm .modal-content {
18	padding: 20px;
19	border-radius: 5px;
20	border: none;
21	text-align: center;
22	font-size: 14px;
23}
24.modal-confirm .modal-header {
25	border-bottom: none;   
26	position: relative;
27}
28.modal-confirm h4 {
29	text-align: center;
30	font-size: 26px;
31	margin: 30px 0 -10px;
32}
33.modal-confirm .btn-close {
34	position: absolute;
35	top: -5px;
36	right: -2px;
37}
38.modal-confirm .modal-body {
39	color: #999;
40}
41.modal-confirm .modal-footer {
42	border: none;
43	text-align: center;		
44	border-radius: 5px;
45	font-size: 13px;
46	padding: 10px 15px 25px;
47}
48.modal-confirm .modal-footer a {
49	color: #999;
50}		
51.modal-confirm .icon-box {
52	width: 80px;
53	height: 80px;
54	margin: 0 auto;
55	border-radius: 50%;
56	z-index: 9;
57	text-align: center;
58	border: 3px solid #f15e5e;
59}
60.modal-confirm .icon-box i {
61	color: #f15e5e;
62	font-size: 46px;
63	display: inline-block;
64	margin-top: 13px;
65}
66.modal-confirm .btn, .modal-confirm .btn:active {
67	color: #fff;
68	border-radius: 4px;
69	background: #60c7c1;
70	text-decoration: none;
71	transition: all 0.4s;
72	line-height: normal;
73	min-width: 120px;
74	border: none;
75	min-height: 40px;
76	border-radius: 3px;
77	margin: 0 5px;
78}
79.modal-confirm .btn-secondary {
80	background: #c1c1c1;
81}
82.modal-confirm .btn-secondary:hover, .modal-confirm .btn-secondary:focus {
83	background: #a8a8a8;
84}
85.modal-confirm .btn-danger {
86	background: #f15e5e;
87}
88.modal-confirm .btn-danger:hover, .modal-confirm .btn-danger:focus {
89	background: #ee3535;
90}
91.trigger-btn {
92	display: inline-block;
93	margin: 100px auto;
94}
95</style> 
96<div class="text-center"> 
97	<a href="#myModal" class="trigger-btn" data-bs-toggle="modal">Click to Open Confirm Modal</a>
98</div>
99
100<!-- Modal HTML -->
101<div id="myModal" class="modal fade">
102	<div class="modal-dialog modal-confirm">
103		<div class="modal-content">
104			<div class="modal-header flex-column">
105				<div class="icon-box">
106					<i class="material-icons">&#xE5CD;</i>
107				</div>						
108				<h4 class="modal-title w-100">Are you sure?</h4>	
109                <button type="button" class="close" data-bs-dismiss="modal" aria-hidden="true">&times;</button>
110			</div>
111			<div class="modal-body">
112				<p>Do you really want to delete these records? This process cannot be undone.</p>
113			</div>
114			<div class="modal-footer justify-content-center">
115				<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
116				<button type="button" class="btn btn-danger">Delete</button>
117			</div>
118		</div>
119	</div>
120</div>