<!doctype html>
<html lang=“en”>
<head>
<!– Required meta tags –>
<meta charset=“utf-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1”>
<!– Bootstrap CSS –>
<link href=“https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css” rel=“stylesheet”>
<!– Option 1: Bootstrap Bundle with Popper –>
<script src=“https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js”></script>
<link rel=“preconnect” href=“https://fonts.googleapis.com”>
<link rel=“preconnect” href=“https://fonts.gstatic.com” crossorigin>
<link href=“https://fonts.googleapis.com/css2?family=Raleway&display=swap” rel=“stylesheet”>
<style>
body {
background-color: whitesmoke;
font-family: ‘Raleway’, sans-serif;
}
#xc {
border-radius: 50%;
width: 40px;
height: 40px;
cursor: pointer;
}
#xc:hover {
background-color: #e7e7e7;
}
</style>
<title>Gmail Delete Model Box</title>
</head>
<body>
<!– Button trigger modal –>
<center>
<br />
<button type=“button” class=“btn btn-primary” data-bs-toggle=“modal” data-bs-target=“#exampleModal”> Launch demo
modal </button>
<br /><br />
<h1>Bootstrap 5 Model Box Look Like Gmail</h1>
</center>
<!– Modal –>
<div class=“modal fade” id=“exampleModal” tabindex=“-1” aria-labelledby=“exampleModalLabel” aria-hidden=“true”>
<div class=“modal-dialog modal-dialog-centered”>
<div class=“modal-content”>
<div class=“modal-body”>
<div class=“p-2 d-flex justify-content-between align-items-center”>
<div class=” p-2 bd-highlight”><b>Confirm deleting messages</b></div>
<div class=“p-2 text-center” id=“xc” data-bs-dismiss=“modal”><b>X</b> </div>
</div>
<div class=“ms-2 me-4 d-flex justify-content-between”>
<div class=“p-2 bd-highlight”>This action will affect all 18 conversations in Trash. Are you
sure you want to continue ?</div>
</div>
<div class=“d-flex flex-row pt-2 justify-content-end”>
<div class=“p-2 bd-highlight”>
<button type=“button” class=“btn btn-default”
data-bs-dismiss=“modal”>Cancel</button>
<button type=“button” class=“btn btn-primary”>OK</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Nice one..