درس پنجم: لایههای هوشمند و پاپآپها
درس پنجم: لایههای هوشمند و پاپآپها
در این بخش یاد میگیرید چگونه بدون خروج کاربر از صفحه، پنجرههای گفتگو (Modal) باز کنید و با استفاده از تولتیپها، راهنماییهای کوچکی را روی المانها نمایش دهید.
۱. مُدال (Modal): پنجرهای روی پنجره دیگر
مُدالها (یا همان پاپآپهای مدرن) زمانی استفاده میشوند که میخواهید کاربر عملیاتی را انجام دهد (مثل تایید حذف یا فرم ورود) بدون اینکه از صفحه فعلی خارج شود. مُدالها در بوتاسترپ از سه بخش اصلی تشکیل شدهاند:
- 🏷️ Modal Header: شامل عنوان و دکمه ضربدر برای بستن.
- 📝 Modal Body: محتوای اصلی (متن، فرم یا تصویر).
- 🔘 Modal Footer: دکمههای عملیاتی مثل “انصراف” یا “ذخیره”.
چگونه یک مُدال را فراخوانی کنیم؟
برای اتصال یک دکمه به یک مُدال، به دو ویژگی (Attribute) حیاتی در دکمه نیاز داریم:
data-bs-toggle="modal": به دکمه میگوید که وظیفهاش باز کردن مُدال است.data-bs-target="#id": آیدیِ دقیق مُدالی که باید باز شود را مشخص میکند.
<button class=“btn btn-primary” data-bs-toggle=“modal” data-bs-target=“#myModal”>باز کردن پنجره</button>
۲. تولتیپ (Tooltip): راهنمای کوچک و هوشمند
تولتیپها ابرهای کوچکی هستند که با نگه داشتن موس روی یک المان ظاهر میشوند. این اجزا برای توضیح آیکونهای گنگ یا مخففها بسیار عالی هستند.
نکات مهم در استفاده از تولتیپ:
- فعالسازی با جاوااسکریپت: بر خلاف اکثر اجزا، تولتیپها برای کار کردن نیاز به یک خط کد کوچک جاوااسکریپت دارند (بوتاسترپ برای بهینه بودن، آنها را به صورت خودکار فعال نمیکند).
- جهت نمایش: با
data-bs-placementمیتوانید تعیین کنید تولتیپ بالا، پایین، چپ یا راست باز شود.
۳. شخصیسازی ابعاد مُدال
بسته به محتوا، ممکن است نیاز داشته باشید مُدال شما بسیار بزرگ یا کوچک باشد. این کار با کلاسهای زیر انجام میشود:
| کلاس | توضیح |
|---|---|
.modal-sm | مُدال کوچک (مناسب برای پیامهای تایید حذف) |
.modal-lg | مُدال بزرگ (مناسب برای فرمهای ثبتنام) |
.modal-fullscreen | مُدال تمامصفحه (مناسب برای گالری تصاویر) |
⚠️ تلههای کاربردی:
- تداخل IDها: اگر دو مُدال در صفحه دارید، حتماً IDهای آنها متفاوت باشد. در غیر این صورت، دکمهها مُدال اشتباه را باز میکنند.
- مُدالهای تودرتو: هرگز یک مُدال را داخل مُدال دیگر باز نکنید. این کار تجربه کاربری (UX) را به شدت تخریب کرده و باعث باگهای گرافیکی میشود.
- فراموش کردن دکمه بستن: همیشه راهی برای خروج کاربر قرار دهید (چه دکمه ضربدر، چه دکمه انصراف).
🔬 کارگاه عملی درس پنجم: سیستم تایید حذف
یک سناریوی واقعی را پیاده کنید:
- یک دکمه Danger (قرمز) با متن “حذف حساب کاربری” بسازید.
- این دکمه باید یک Modal Small باز کند.
- در بدنه مُدال، جمله “آیا از انجام این کار اطمینان دارید؟” را بنویسید.
- در فوتر مُدال، دو دکمه بگذارید: یکی برای تایید (قرمز) و یکی برای انصراف (خاکستری).
data-bs-dismiss="modal" را به آن دکمه اضافه کنید.درس پنجم به پایان رسید!
حالا شما استادِ تعاملاتِ لایهای هستید. در درس ششم به سراغ **ناوبری و منوهای سایت (Navbars & Pagination)** خواهیم رفت تا یاد بگیرید چطور کاربر را در سایت خود هدایت کنید.