‏Micromodal.js؛ مودال سبک و دسترس‌پذیر

به گفتهٔ سازندهٔ این کتابخونه، Micromodal.js یه کتابخونهٔ مودال سبک، قابل‌تنظیم و دسترس‌پذیره که با جاوااسکریپت خالص نوشته شده. حجمش بعد از فشرده‌سازی فقط ۱.۹ کیلوبایته، ولی کاری که می‌کنه اینه که بتونی با خیال راحت پنجره‌های مودالی بسازی که با دستورالعمل‌های WAI-ARIA سازگارن. منظور از مودال همون پنجرهٔ شناوریه که روی بقیهٔ محتوا میاد و معمولاً یه لایهٔ تیره پشتش می‌ذاره.

نکتهٔ اصلی اینه که این کتابخونه اون کارهای دردسرسازِ دسترس‌پذیری رو خودش حل می‌کنه. مثلاً بستن مودال با کلیک روی پس‌زمینه یا فشار دادن کلید esc، عوض کردن مقدار ویژگی aria-hidden، گیر انداختن فوکوسِ کلید Tab داخل مودال، نگه‌داشتن جای فوکوس قبل و بعد از باز شدن، و بردن فوکوس روی اولین عنصر قابل‌فوکوس داخل مودال.

طرز کارش هم خیلی ساده‌ست و بیشتر کارها رو پشت پرده انجام می‌ده. تو فقط باید ساختار HTML مودال رو بذاری و روی عنصری که می‌خوای مودال رو باز کنه (مثل یه دکمه) ویژگی data-micromodal-trigger رو با مقدار برابرِ id مودال ست کنی. عنصرِ پس‌زمینه هم با ویژگی data-micromodal-close مشخص می‌شه که کلیک روش مودال رو می‌بنده. بعدش کافیه ماژول رو راه بندازی:

MicroModal.init();

اگه بخوای برنامه‌نویسی‌تر کار کنی، می‌تونی مستقیم با متدهای show و close مودال رو باز و بسته کنی. رشته‌ای که به این متدها می‌دی باید با id مودال مورد نظر یکی باشه:

MicroModal.show('modal-id');
MicroModal.close('modal-id');

متدهای init و show یه شیء تنظیمات اختیاری هم می‌گیرن که باهاش می‌تونی رفتار مودال رو کنترل کنی. مثلاً کال‌بک‌های onShow و onClose برای وقتِ باز و بسته شدن، گزینهٔ disableScroll برای غیرفعال کردن اسکرول صفحه موقع باز بودن مودال، و awaitOpenAnimation و awaitCloseAnimation برای وقتی که از انیمیشن CSS استفاده می‌کنی تا کتابخونه منتظر تموم شدن انیمیشن بمونه.

یه چیز مهم اینه که این کتابخونه هیچ تصمیمی دربارهٔ ظاهر مودال نمی‌گیره و اصلاً استایلی همراهش نمیاد؛ حتی نمایش و مخفی شدن مودال رو هم خودش جابه‌جا نمی‌کنه. سازنده پیشنهاد می‌ده حداقل یه CSS ساده بذاری که با کلاس is-open نمایش مودال رو کنترل کنه. این یعنی ظاهر کار کاملاً دست خودته و آزادی که هرجوری دوست داری استایلش بدی.

نکات کلیدی:

• حجمش فقط ۱.۹ کیلوبایت بعد از فشرده‌سازیه و با جاوااسکریپت خالص نوشته شده
• مودال‌های سازگار با WAI-ARIA می‌سازه و کارهای دسترس‌پذیری رو خودش حل می‌کنه
• گیر انداختن فوکوس Tab، بستن با esc و کلیک روی پس‌زمینه به‌صورت آماده پشتیبانی می‌شه
• با ویژگی‌های data یا با متدهای show و close قابل کنترله
• هیچ استایلی تحمیل نمی‌کنه؛ ظاهر مودال کاملاً دست خودته