如何创建删除模态框

第一步 - 添加 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;
  مؤشور: pointer;
  عرض: 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%; /* 全高 */
  تداخل: خودکار; /* فعال کردن اسکرول (اگر نیاز باشد) */
  رنگ پس‌زمینه: #474e5d;
  پایین‌گذاری بالا: 50px;
}
/* محتوای جعبه مدل */
.modal-content {
  رنگ پس‌زمینه: #fefefe;
  مجوز: 5% خودکار 15% خودکار; /* فاصله از بالا 5%，فاصله از پایین 15% و در وسط 5% */
  پیرامون: 1px خطی #888;
  عرض: 80%; /* عرض می‌تواند بیشتر یا کمتر باشد، بسته به اندازه صفحه نمایش */
}
/* تنظیم سبک خط افقی */
hr {
  پیرامون: 1px خطی #f1f1f1;
  مجوز پایین: 25px;
}
/* دکمه بستن جعبه مدل (x) */
.close {
  موقعیت: تعادلی;
  راست: 35px;
  بالا: 15px;
  اندازه فونت: 40px;
  وزن فونت: تیره;
  رنگ: #f1f1f1;
}
.close:hover {
.close:focus {
  رنگ: #f44336;
  مؤشور: pointer;
}
/* پاکسازی شناورها */
.clearfix::after {
  محتوای: "";
  پاکسازی: هر دو;
  نمایش: table;
}
/* تغییر سبک دکمه‌های لغو و حذف در صفحه‌های کوچک */
@media screen and (max-width: 300px) {
  .cancelbtn, .deletebtn {
    عرض: 100%;
  }
}

آزمایش کنید

توجه:شما همچنین می‌توانید از کد JavaScript زیر برای بستن جعبه مدل با کلیک بر روی هر قسمت خارج از محتوای مدل استفاده کنید (و نه فقط با کلیک بر روی دکمه "x" یا "لغو"):

مثال

<script>
// دریافت جعبه مدل
var modal = document.getElementById('id01');
// زمانی که کاربر روی هر قسمت خارج از جعبه مدل کلیک کند، آن را ببند
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>

آزمایش کنید