Cómo crear un cuadro modal de eliminación

Paso 1 - Añadir HTML:

<button onclick="document.getElementById('id01').style.display='block'">Abrir Modal</button>
<div id="id01" class="modal">
  <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Cerrar Modal">×</span>
  <form class="modal-content" action="/action_page.php">
    <div class="container">
      <h1>Eliminar Cuenta</h1>
      <p>¿Estás seguro de que deseas eliminar tu cuenta?</p>
      <div class="clearfix">
        <button type="button" class="cancelbtn">Cancelar</button>
        <button type="button" class="deletebtn">Eliminar</button>
      </div>
    </div>
  </form>
</div>

Segundo paso - Añade CSS:

* {box-sizing: border-box}
/* Estilos para todos los botones */
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;
}
/* Hace que los botones de cancelación y eliminación se desplacen y añade un ancho igual */
.cancelbtn, .deletebtn {
  float: left;
  width: 50%;
}
/* Añade color al botón de cancelación */
.cancelbtn {
  background-color: #ccc;
  color: black;
}
/* Añade color al botón de eliminación */
.deletebtn {
  background-color: #f44336;
}
/* Añade margen interno y alinea el texto para el contenedor */
.container {
  padding: 16px;
  text-align: center;
}
/* Modal (fondo) */
.modal {
  display: none; /* Oculto por defecto */
  position: fixed; /* Fijo en su lugar */
  z-index: 1; /* Colocado en la capa superior */
  left: 0;
  top: 0;
  width: 100%; /* Todo el ancho */
  height: 100%; /* Todo el alto */
  overflow: auto; /* Habilitar el desplazamiento (si es necesario) */
  background-color: #474e5d;
  padding-top: 50px;
}
/* Contenido/cuadro modal */
.modal-content {
  background-color: #fefefe;
  margin: 5% auto 15% auto; /* 5% del margen superior, 15% del margen inferior y centrado 5% */
  border: 1px solid #888;
  width: 80%; /* El ancho puede ser más o menos, dependiendo del tamaño de la pantalla */
}
/* Estilo de la línea horizontal */
hr {
  border: 1px solid #f1f1f1;
  margin-bottom: 25px;
}
/* Botón de cierre del cuadro 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;
}
/* Clear floats */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
/* Cambiar el estilo de los botones de cancelar y eliminar en pantallas de muy pequeño tamaño */
@media screen and (max-width: 300px) {
  .cancelbtn, .deletebtn {
    width: 100%;
  }
}

Prueba por tu cuenta

Consejo:También puede usar el siguiente código JavaScript para cerrar el cuadro modal haciendo clic en cualquier área fuera del contenido del cuadro modal (no solo haciendo clic en el botón "x" o "Cancelar" para cerrarlo):

Ejemplo

<script>
// Obtener el cuadro modal
var modal = document.getElementById('id01');
// Cuando el usuario hace clic en cualquier posición fuera del cuadro modal, ciérrelo
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>

Prueba por tu cuenta