Hoe een verwijderingsmodal te maken

Eerste stap - Voeg HTML toe:

<button onclick="document.getElementById('id01').style.display='block'">Open Modal</button>
<div id="id01" class="modal">
  <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span>
  <form class="modal-content" action="/action_page.php">
    <div class="container">
      <h1>Verwijder Account</h1>
      <p>Bent u zeker dat u uw account wilt verwijderen?</p>
      <div class="clearfix">
        <button type="button" class="cancelbtn">Annuleer</button>
        <button type="button" class="deletebtn">Verwijder</button>
      </div>
    </div>
  </form>
</div>

Tweede stap - Voeg CSS toe:

* {box-sizing: border-box}
/* 为所有按钮设置样式 */
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;
}
/* 使取消和删除按钮浮动，并添加相等的宽度 */
.cancelbtn, .deletebtn {
  float: left;
  width: 50%;
}
/* 为取消按钮添加颜色 */
.cancelbtn {
  background-color: #ccc;
  color: black;
}
/* 为删除按钮添加颜色 */
.deletebtn {
  background-color: #f44336;
}
/* 为容器添加内边距并居中文本 */
.container {
  padding: 16px;
  text-align: center;
}
/* 模态（背景） */
.modal {
  display: none; /* 默认隐藏 */
  position: fixed; /* 固定在原地 */
  z-index: 1; /* 置于顶层 */
  left: 0;
  top: 0;
  width: 100%; /* 全宽 */
  height: 100%; /* 全高 */
  overflow: auto; /* Schakel scrollen in als nodig is */
  background-color: #474e5d;
  padding-top: 50px;
}
/* Inhoud van het modaal venster */
.modal-content {
  background-color: #fefefe;
  margin: 5% auto 15% auto; /* 5% van de top, 15% van de onderkant en centreren 5% */
  border: 1px solid #888;
  width: 80%; /* De breedte kan meer of minder zijn, afhankelijk van het schermformaat */
}
/* Stel de stijl van de horizontale lijn in */
hr {
  border: 1px solid #f1f1f1;
  margin-bottom: 25px;
}
/* Sluitingsknop van het modaal venster (x) */
.close {
  position: absolute;
  right: 35px;
  top: 15px;
  font-size: 40px;
  font-weight: bold;
  color: #f1f1f1;
}
.close:hover {
.close:focus {
  color: #f44336;
  cursor: pointer;
}
/* Wis de float */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
/* Pas de stijl van de annuleringsknop en de verwijderingsknop aan op de kleinste schermen */
@media screen and (max-width: 300px) {
  .cancelbtn, .deletebtn {
    width: 100%;
  }
}

Try it yourself

Tip:Je kunt ook de volgende JavaScript-code gebruiken om het modaal venster te sluiten door op het gebied buiten de inhoud van het modaal venster te klikken (en niet alleen door op de knop "x" of "annuleren" te klikken om het te sluiten):

Voorbeeld

<script>
// Haal het modaal venster op
var modal = document.getElementById('id01');
// Wanneer de gebruiker klikt op een locatie buiten het modaal venster, sluit het venster
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>

Try it yourself