<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Responsive Modal Popup by BEN YOK</title>
<style>
body {
margin: 0;
padding: 0;
background-color: rgb(92, 236, 188);
}
.btn-save-now {
color: white;
padding: 8px 15px;
font-size: 20px;
background-color: blue;
border: none;
border-radius: 5px;
cursor: pointer;
}
.modal {
display: none;
position: fixed;
justify-content: center;
align-items: center;
background-color: rgb(235, 243, 224);
padding: 15px;
border-radius: 10px;
z-index: 99999;
top: 15%;
left: 50%;
transform: translate(-50%, -50%);
}
.modal-close {
font-size: 25px;
font-weight: bold;
color: red;
float: right;
cursor: pointer;
}
.modal-content {
max-width: 100%;
}
.modal-header {
font-weight: bold;
font-size: 20px;
}
.modal-body p {
font-size: 18px;
}
#btn-alert-div {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 10px;
}
.btn-alert-no,
.btn-alert-yes {
color: white;
padding: 8px 15px;
font-size: 17px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.btn-alert-no {
background-color: black;
}
.btn-alert-yes {
background-color: blue;
}
@media (max-width: 400px) {
.modal {
width: 90%;
}
}
</style>
</head>
<body>
<button class="btn-save-now" onclick="openModal()">SAVE NOW</button>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="modal-close" onclick="closeModal()">×</span>
<div class="modal-header">Confirmation Alert!</div>
<div class="modal-body">
<hr>
<p>Are you sure you want to save??</p>
<hr>
<div id="btn-alert-div">
<button class="btn-alert-no">No</button>
<button class="btn-alert-yes">Yes</button>
</div>
</div>
</div>
</div>
<script>
function openModal() {
document.getElementById("myModal").style.display = "flex";
}
function closeModal() {
document.getElementById("myModal").style.display = "none";
}
window.onclick = function(event) {
const modal = document.getElementById("myModal");
if (event.target === modal) {
closeModal();
}
}
</script>
</body>
</html>