Modal و Overlay

Modal و Overlay را در این درس به‌صورت عملی بررسی می‌کنیم. هدف این است که علاوه بر شناخت Utilityها، دلیل انتخاب آن‌ها و روش ارزیابی نتیجه را نیز بدانید.

هدف و مفهوم اصلی

Modal و Toast لایه‌های موقتی رابط هستند. Modal باید Focus را مدیریت، Escape را پشتیبانی و Scroll پس‌زمینه را کنترل کند؛ Toast باید پیام کوتاه، وضعیت و زمان کافی برای خواندن داشته باشد.

روش پیاده‌سازی

1. Overlay و Panel را در لایه مشخص قرار دهید.
2. Role، نام، Focus اولیه و بستن با Keyboard را پیاده کنید.
3. Toast را در ناحیه زنده مناسب و خارج از مسیر محتوای اصلی نشان دهید.

نمونه قابل اجرا

نمونه زیر را در پروژه خود اجرا کنید، سپس هر Utility را جداگانه تغییر دهید تا اثر آن روی Layout و ظاهر مشخص شود.

<div class="fixed inset-0 z-50 grid place-items-center bg-slate-950/60 p-4">
  <section role="dialog" aria-modal="true"
    class="max-h-[85vh] w-full max-w-lg overflow-y-auto rounded-2xl bg-white p-6 shadow-2xl">
    <h2 class="text-xl font-bold">تأیید عملیات</h2>
    <p class="mt-3 text-slate-600">آیا ادامه می‌دهید؟</p>
  </section>
</div>

خروجی مورد انتظار

Modal مرکزی با Overlay و Scroll داخلی.

نکات مهم و خطاهای رایج

• ظاهر Modal بدون Focus Trap و بازگرداندن Focus کامل نیست.
• Toast نباید تنها محل نمایش خطای حیاتی باشد.

تمرین پیشنهادی

Modal را با Escape ببندید و بازگشت Focus به دکمه آغازگر را آزمایش کنید.

مطالعه مرجع رسمی مرتبط در مستندات Tailwind CSS