Miten luodaan poistaa modal-ikkuna?

Vaihe 1 - Lisää HTML:

button onclick="document.getElementById('id01').style.display='block'"
div id="id01" class="modal"
  ×
  <form class="modal-content" action="/action_page.php">
    <div class="container">
      <h1>Poista Tili</h1>
      <p>Oletko varma, että haluat poistaa tilisi?</p>
      <div class="clearfix">
        <nappi type="button" class="cancelbtn">Peruuta</nappi>
        <nappi type="button" class="deletebtn">Poista</nappi>
      </div>
    </div>
  </form>
</div>

Toinen vaihe - lisää CSS:ä:

* {box-sizing: border-box}
/* aseta kaikki napit tyyleiksi */
nappi {
  takaverho: #04AA6D;
  väri: valkoinen;
  tylväisyys: 14px 20px;
  marginaali: 8px 0;
  reuna: ei mitään;
  cursor: pointer;
  width: 100%;
  läpinäkyvyys: 0.9;
}
nappi:hover {
  läpinäkyvyys: 1;
}
/* tee peruutus- ja poistobuttonit liukuviksi ja lisää yhtä suuri leveys */
.cancelbtn, .deletebtn {
  liukua: vasen;
  leveys: 50%;
}
/* lisää väri peruutusbuttoniin */
.cancelbtn {
  takaverho: #ccc;
  väri: musta;
}
/* lisää väri poistobuttoniin */
.deletebtn {
  takaverho: #f44336;
}
/* lisää sisätilavuus säiliöön ja keskitä teksti */
.container {
  tylväisyys: 16px;
  tekstiasento: keskitetty;
}
/* modaalinen (tausta) */
.modal {
  näyttö: ei näy; /* oletuksena piilotettu */
  sijainti: kiinteä; /* pysy paikallaan */
  z-indeksi: 1; /* aseta ylimmäiseksi */
  x-akseli: 0;
  y-akseli: 0;
  leveys: 100%; /* täysin leveä */
  korkeus: 100%; /* täysin korkea */
  overflow: auto; /* Otetaan käyttöön roolitus (tarvittaessa) */
  background-color: #474e5d;
  padding-top: 50px;
}
/* Mukautusikkunan sisältö/ikkuna */
.modal-content {
  background-color: #fefefe;
  margin: 5% auto 15% auto; /* Ylös 5%, alas 15%, ja keskellä 5% */
  border: 1px solid #888;
  width: 80%; /* Leveys voi olla enemmän tai vähemmän, riippuen näytön koosta */
}
/* Aseta vaakaviivan tyyli */
hr {
  border: 1px solid #f1f1f1;
  margin-bottom: 25px;
}
/* Mukautusikkunan suljettpainike (x) */
.close {
  position: absolute;
  right: 35px;
  top: 15px;
  font-size: 40px;
  font-weight: bold;
  color: #f1f1f1;
}
.close:hover {
.close:focus {
  color: #f44336;
  cursor: pointer;
}
/* Tyhjennä liukuvat */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
/* Muuta pienimmän näytön tyyliä peruutus- ja poistopainikkeille */
@media screen and (max-width: 300px) {
  .cancelbtn, .deletebtn {
    width: 100%;
  }
}

Kokeile itse

Vinkki:Voit käyttää seuraavaa JavaScript-koodia sulkeaksesi mukautusikkunan napsauttamalla sen sisällön ulkopuolella (ei pelkästään napsauttamalla "x"-painiketta tai "Peruuta"-painiketta):

Esimerkki

<script>
// Hae mukautusikkuna
var modal = document.getElementById('id01');
// Kun käyttäjä napsauttaa mukautusikkunaa ulkopuolelta, sulje se
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>

Kokeile itse