📌 Modal یا پنجره پاپ‌آپ، یک باکس محتوایی است که روی صفحه باز می‌شود و معمولاً برای نمایش پیام، فرم، هشدار یا جزئیات استفاده می‌شود.

✅ Modal ساده

<!-- دکمه باز کردن Modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  باز کردن پنجره
</button>

<!-- ساختار Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">عنوان پنجره</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="بستن"></button>
      </div>
      <div class="modal-body">
        این یک متن نمونه داخل پنجره مودال است.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">بستن</button>
        <button type="button" class="btn btn-primary">ذخیره تغییرات</button>
      </div>
    </div>
  </div>
</div>

✅ Modal بدون Footer

<div class="modal fade" id="modalNoFooter" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">پنجره بدون Footer</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        فقط محتوای متن اینجا نمایش داده می‌شود.
      </div>
    </div>
  </div>
</div>

✅ Modal کوچک، بزرگ و تمام صفحه

<!-- کوچک -->
<div class="modal-dialog modal-sm">
  ...
</div>

<!-- بزرگ -->
<div class="modal-dialog modal-lg">
  ...
</div>

<!-- تمام صفحه -->
<div class="modal-dialog modal-fullscreen">
  ...
</div>

✅ Modal همراه با فرم

<div class="modal fade" id="formModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">فرم ورود</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <form>
          <div class="mb-3">
            <label for="emailInput" class="form-label">ایمیل</label>
            <input type="email" class="form-control" id="emailInput">
          </div>
          <div class="mb-3">
            <label for="passwordInput" class="form-label">رمز عبور</label>
            <input type="password" class="form-control" id="passwordInput">
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">بستن</button>
        <button type="button" class="btn btn-primary">ورود</button>
      </div>
    </div>
  </div>
</div>

✅ نکات مهم

• data-bs-toggle="modal" → برای فعال‌سازی باز کردن مودال با دکمه یا لینک

• data-bs-target="#idModal" → مشخص کردن ID مودال

• fade → برای انیمیشن باز و بسته شدن مودال

• btn-close → دکمه بستن مودال