كيفية إنشاء نافذة موديل حذف

الخطوة الأولى - إضافة HTML:

فتح الملف
ملف
  ×
  <form class="modal-content" action="/action_page.php">
    <div class="container">
      <عنوان1>Delete Account</عنوان1>
      <p>هل انت متأكد من رغبتك في مسح حسابك؟</p>
      <div class="clearfix">
        <النقر: type="button" class="cancelbtn">الغاء</النقر>
        <النقر: type="button" class="deletebtn">مسح</النقر>
      </div>
    </div>
  </form>
</div>

خطوة ثانية - اضافة CSS:

* {حجم الصندوق: صندوق داخلي}
/* ضبط اسلوب جميع الازرار */
النقر: {
  لون الخلفية: #04AA6D;
  لون النص: أبيض;
  الملء: 14px 20px;
  السماحية: 8px 0;
  الحاجز: لا شيء;
  نقطة الإشارة: pointer;
  عرض: 100%;
  شفافية: 0.9;
}
النقر: {
  شفافية:1;
}
/* جعل زر الرفض و الزر المسح يتدفقان واضافة عرض متساوي */
.cancelbtn, .deletebtn {
  الغرق: الايسر;
  العرض: 50%;
}
/* اضافة لون للزر الرفض */
.cancelbtn {
  لون الخلفية: #ccc;
  لون النص: أسود;
}
/* اضافة لون للزر المسح */
.deletebtn {
  لون الخلفية: #f44336;
}
/* اضافة ملء داخلي وتمركز النص للقالب */
.container {
  الملء: 16px;
  التداخل النصي: من الوسط;
}
/* نموذج (خلفية) */
.modal {
  العرض: لا شيء; /* مخفي بشكل افتراضي */
  الوضع: ثابت; /* ثابت في المكان */
  مستوى التسلسل: 1; /* وضع في الاعلى */
  الجزء الايسر: 0;
  الجزء العلوي: 0;
  العرض: 100%; /* الكامل في العرض */
  الارتفاع: 100%; /* الكامل في الارتفاع */
  التمدد: تلقائي; /* تفعيل التمرير إذا لزم الأمر */
  لون الخلفية: #474e5d;
  هامش أعلى: 50px;
}
/* محتوى/نافذة المودال */
.modal-content {
  لون الخلفية: #fefefe;
  هامش: 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>

جرب بنفسك