Come creare una finestra modale di eliminazione

Passo 1 - Aggiungi HTML:

<button onclick="document.getElementById('id01').style.display='block'">Apri Modale</button>
<div id="id01" class="modal">
  <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Chiudi Modale">×</span>
  <form class="modal-content" action="/action_page.php">
    <div class="container">
      <h1>Elimina Account</h1>
      <p>Sei sicuro di voler eliminare il tuo account?</p>
      <div class="clearfix">
        <button type="button" class="cancelbtn">Annulla</button>
        <button type="button" class="deletebtn">Elimina</button>
      </div>
    </div>
  </form>
</div>

Secondo passo - Aggiungi CSS:

* {raggiungimento del contenuto: contenitore}
/* Imposta stili per tutti i pulsanti */
button {
  colore di sfondo: #04AA6D;
  colore: bianco;
  margine interna: 14px 20px;
  margine: 8px 0;
  bordo: none;
  cursore: puntatore;
  larghezza: 100%;
  opacità: 0.9;
}
button:hover {
  opacità:1;
}
/* Fai fluttuare i pulsanti di annullamento e eliminazione e aggiungi larghezze uguali */
.cancelbtn, .deletebtn {
  flottante: sinistro;
  larghezza: 50%;
}
/* Aggiungi colore al pulsante di annullamento */
.cancelbtn {
  colore di sfondo: #ccc;
  colore: nero;
}
/* Aggiungi colore al pulsante di eliminazione */
.deletebtn {
  colore di sfondo: #f44336;
}
/* Aggiungi spazi interni alla contenitore e allinea il testo */
.container {
  margine: 16px;
  allineamento del testo: centro;
}
/* Modale (sfondo) */
.modal {
  display: none; /* Nascosto per default */
  posizione: fisso; /* Fisso in origine */
  z-index: 1; /* Posto in alto */
  sinistro: 0;
  alto: 0;
  larghezza: 100%; /* Tutto la larghezza */
  altezza: 100%; /* Tutto l'altezza */
  overflow: auto; /* Abilita lo scorrimento (se necessario) */
  colore di sfondo: #474e5d;
  margine superiore: 50px;
}
/* Contenuto/finestra modale */
.modal-content {
  colore di sfondo: #fefefe;
  margine: 5% auto 15% auto; /* 5% dal tetto, 15% dal fondo e centrato 5% */
  bordo: 1px solido #888;
  larghezza: 80%; /* La larghezza può essere più o meno, a seconda della dimensione dello schermo */
}
/* Imposta lo stile della linea orizzontale */
hr {
  bordo: 1px solido #f1f1f1;
  margine inferiore: 25px;
}
/* Bottone di chiusura della finestra modale (x) */
.close {
  posizione: assoluto;
  destra: 35px;
  top: 15px;
  dimensione del testo: 40px;
  peso del testo: bold;
  colore: #f1f1f1;
}
.close:hover {
.close:focus {
  colore: #f44336;
  cursore: puntatore;
}
/* Pulisci le fluttuazioni */
.clearfix::after {
  contenuto: "";
  clear: both;
  display: table;
}
/* Modifica lo stile dei pulsanti di annullamento e di eliminazione per gli schermi extra piccoli */
@media schermo and (larghezza massima: 300px) {
  .cancelbtn, .deletebtn {
    larghezza: 100%;
  }
}

Prova personalmente

Suggerimento:Puoi anche utilizzare il seguente codice JavaScript per chiudere la finestra modale cliccando su qualsiasi area al di fuori del contenuto della finestra modale (non solo cliccando su pulsanti come "x" o "annulla"):

Esempio

<script>
// Ottieni la finestra modale
var modal = document.getElementById('id01');
// Quando l'utente clicca su qualsiasi posizione al di fuori della finestra modale, chiudila
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>

Prova personalmente