如何创建删除模态框

第一步 - 添加 HTML：

Close Modal
Open Modal
  ×
  <form class="modal-content" action="/action_page.php">
    <div class="container">
      <h1>Delete Account</h1>
      <p>Are you sure you want to delete your account?</p>
      <div class="clearfix">
        <button type="button" class="cancelbtn">Cancel</button>
        <button type="button" class="deletebtn">Delete</button>
      </div>
    </div>
  </form>
</div>

第二步 - 添加 CSS：

* {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; /* ਜ਼ਰੂਰਤ ਹੋਏ ਤੌਰ 'ਤੇ ਸਰਕਲ ਚਾਲੂ ਕਰੋ */
  background-color: #474e5d;
  padding-top: 50px;
}
/* ਮੋਡਲ ਸਮੱਗਰੀ/ਬਕਸਾ */
.modal-content {
  background-color: #fefefe;
  margin: 5% auto 15% auto; /* ਉੱਪਰ 5%, ਨੀਚੇ 15%, ਅਤੇ ਕੇਂਦਰ 5% */
  border: 1px solid #888;
  width: 80%; /* ਚੌਦਾਂਵ ਦੀ ਸਾਈਜ਼ ਹੋ ਸਕਦੀ ਹੈ, ਉਸ ਨੂੰ ਸਕਰੀਨ ਦੀ ਸਾਈਜ਼ ਨਾਲ ਨਿਰਭਰ ਕਰਾਓ */
}
/* ਹਰੀਜ਼ਨ ਦੀ ਸਟਾਈਲ ਸੈਟ ਕਰੋ */
hr {
  border: 1px solid #f1f1f1;
  margin-bottom: 25px;
}
/* ਮੋਡਲ ਬੰਦ ਬਟਨ (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;
}
/* ਸੁਪਰ ਸਮਾਂਸਕਰਣ ਉੱਤੇ ਰਦ੍ਦ ਬਟਨ ਅਤੇ ਹਟਾਉਣ ਬਟਨ ਦੀ ਸਟਾਈਲ ਬਦਲੋ */
@media screen and (max-width: 300px) {
  .cancelbtn, .deletebtn {
    width: 100%;
  }
}

亲自试一试

ਸੁਝਾਅ:ਤੁਸੀਂ ਨਾਲ ਵੀ ਹੋਰ ਜਾਵਾਸਕ੍ਰਿਪਟ ਵਰਤ ਸਕਦੇ ਹੋ, ਜਿਸ ਨਾਲ ਮੋਡਲ ਦੇ ਬਾਹਰ ਦੇ ਖੇਤਰ ਨੂੰ ਕਲਿੱਕ ਕਰਕੇ ਮੋਡਲ ਬੰਦ ਕਰ ਸਕਦੇ ਹੋ (ਨਾ ਕੇਵਲ ਖਤਮ ਬਟਨ ਜਾਂ ਰਦ੍ਦ ਬਟਨ ਨੂੰ ਕਲਿੱਕ ਕਰਕੇ ਹੀ):

ਪ੍ਰਕਾਸ਼ਨ

<script>
// 获取模态框
var modal = document.getElementById('id01');
// 当用户点击模态框之外的任何位置时，将其关闭
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

亲自试一试