Cách tạo hộp modal xóa

Bước 1 - Thêm HTML：

<button onclick="document.getElementById('id01').style.display='block'">Mở Modal</button>
<div id="id01" class="modal">
  <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Đóng Modal">×</span>
  <form class="modal-content" action="/action_page.php">
    <div class="container">
      <h1>Xóa Tài Khoản</h1>
      <p>Bạn có chắc chắn muốn xóa tài khoản của mình không?</p>
      <div class="clearfix">
        <button type="button" class="cancelbtn">Hủy</button>
        <button type="button" class="deletebtn">Xóa</button>
      </div>
    </div>
  </form>
</div>

Bước 2 - Thêm CSS:

* {box-sizing: border-box}
/* Thiết lập phong cách cho tất cả các nút */
button {
  background-color: #04AA6D;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
  opacity: 0.9;
}
button:hover {
  opacity:1;
}
/* Làm cho nút hủy và xóa trôi nổi và thêm độ rộng bằng nhau */
.cancelbtn, .deletebtn {
  float: left;
  width: 50%;
}
/* Thêm màu cho nút hủy */
.cancelbtn {
  background-color: #ccc;
  color: black;
}
/* Thêm màu cho nút xóa */
.deletebtn {
  background-color: #f44336;
}
/* Thêm khoảng trống trong và căn văn bản cho khối chứa */
.container {
  padding: 16px;
  text-align: center;
}
/* Mô đun (bối cảnh) */
.modal {
  display: none; /* Ẩn mặc định */
  position: fixed; /* Định vị cố định tại nơi */
  z-index: 1; /* Đặt ở lớp trên cùng */
  left: 0;
  top: 0;
  width: 100%; /* Toàn rộng */
  height: 100%; /* Toàn cao */
  overflow: auto; /* Kích hoạt cuộn (nếu cần) */
  background-color: #474e5d;
  padding-top: 50px;
}
/* Nội dung/khung modal */
.modal-content {
  background-color: #fefefe;
  margin: 5% auto 15% auto; /* Cách trên cùng 5%, cách dưới cùng 15%, và trung tâm 5% */
  border: 1px solid #888;
  width: 80%; /* Chiều rộng có thể nhiều hơn hoặc ít hơn, tùy thuộc vào kích thước màn hình */
}
/* Thiết lập樣式 cho dòng ngang */
hr {
  border: 1px solid #f1f1f1;
  margin-bottom: 25px;
}
/* Nút đóng khung modal (x) */
.close {
  position: absolute;
  right: 35px;
  top: 15px;
  font-size: 40px;
  font-weight: bold;
  color: #f1f1f1;
}
.close:hover {
.close:focus {
  color: #f44336;
  cursor: pointer;
}
/* Xóa nổi chìm */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
/* Thay đổi樣式 của nút Hủy và nút Xóa trên màn hình siêu nhỏ */
@media screen and (max-width: 300px) {
  .cancelbtn, .deletebtn {
    width: 100%;
  }
}

Thử ngay

Lưu ý:Bạn cũng có thể sử dụng mã JavaScript sau để đóng khung modal bằng cách nhấp vào vùng ngoài nội dung của khung (không chỉ nhấp vào nút "x" hoặc nút "Hủy" để đóng nó):

Thực thể

<script>
// Lấy khung modal
var modal = document.getElementById('id01');
// Khi người dùng nhấp vào bất kỳ vị trí nào ngoài khung modal, hãy đóng nó
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>

Thử ngay