ایجاد پنجره دیالوگ در Bootstrap

تاریخ انتشار: 22 دی 1394

تعداد بازدید: 53 نفر

در این بخش نحوه ایجاد پنجره دیالوگ با استفاده از Bootstrap را خواهید آموخت.

modalها یک پنجره دیالوگ هستند که جهت ارائه اطلاعات مهم به کاربر یا انجام کارهای لازم قبل از ادامه یک عملیات توسط کاربر، میباشند. پنجره های دیالوگ (modal) معمولاً برای هشدار دادن به کاربر در موقعیت هایی مانند پایان زمان یک عملیات یا جهت گرفتن تأیید نهایی کاربر قبل از انجام هر عملیات کلیدی مانند ذخیره کردن یا پاک کردن اطلاعات مهم به کار برده میشوند.
میتوانید با استفاده از پلاگین modal در بوت استرپ، به راحتی پنجره های دیالوگ هوشمند و انعطاف پذیر ایجاد نمایید. مثال زیر نحوه ایجاد یک پنجره دیالوگ که دارای عنوان، قسمت متن پیام (body) و فوتر (شامل دکمه های عملیاتی) میباشد را نشان میدهد :

مثال بالا پنجره دیالوگ را زمانی که DOM به طور کامل توسط جاوا اسکریپت بارگذاری شد، اجرا میکند. خروجی آن به شکل زیر خواهد بود :

پنجره های فعال :

میتوانید یک پنجره دیالوگ را با کلیک کردن بر روی یک دکمه یا لینک از طریق ویژگی -data فعال کنید (بدون نیاز به نوشتن کد جاوا اسکریپت). مانند مثال زیر :

مثال بالا پنجره دیالوگ را زمانی که بر روی دکمه "Launch Demo Modal" کلیک کنید، باز میکند. حال بیایید برای درک بهتر مطلب هر کدام از بخش های کد را یک به یک بررسی کنیم :

توضیح کد :

جهت فعال کردن پنجره دیالوگ از طریق ویژگی -data ، نیاز به دو عنصر داریم :
عنصر کنترل کننده مانند دکمه یا لینک و عنصر modal

بیرونی ترین کانتینر هر modal باید یک شناسه منحصر به فرد (در این مثال "id="myModal) داشته باشد تا بتواند توسط ویژگی data-target (برای دکمه ها) یا href (برای لینک ها) مربوط به کنترل کننده ها، مقصدگذاری شود.
ویژگی "data-toggle="modal به همراه ویژگی "data-target="#myModal یا "href="#myModal باید به عنصر کنترل کننده (مانند دکمه یا لینک) اضافه شود تا یک پنجره مشخص را یه عنوان مقصد قرار دهد.

کلاس modal-dialog. پهنا و تنظیم عمودی و افقی را تعیین میکند. در حالی که کلاس modal-content. سبک هایی مانند متن و رنگ پس زمینه، حاشیه ها، گوشه های گرد و ... را تنظیم میکند.
کلاسmodal-header . یک هدر برای پنجره تعریف میکند که معمولاً شامل یک عنوان برای پنجره و یک دکمه close میباشد. کلاس .modal-body شامل محتوای اصلی مانند متن، تصاویر، فرم و ... میباشد و کلاس .modal-footer ، فوتر را که معمولاً شامل دکمه های عملیاتی است، تعریف میکند.
نکته : کلاس .fade در عنصر .modal ، افکت fading و sliding را در هنگام نمایش یا بستن پنجره بر روی آن اعمال میکند. چنانچه میخواهید پنجره دیالوگ بدون هیچ افکتی به طور ساده باز و بسته شود کافیست این کلاس را حذف کنید.

فعال سازی پنجره ها با جاوا اسکریپت :

همچنین میتوانید با استفاده از جاوا اسکریپت پنجره های دیالوگ را باز و بسته نمایید. فقط لازم است که تابع modal( ) در بوت استرپرا همراه با id یا کلاس modal در کد جاوا اسکریپت فراخوانی نمایید.

تغییر اندازه پنجره ها :

بوت استرپ این امکان را به شما میدهد که پنجره های دیالوگ را بزرگ یا کوچک نمایید.
این کار را میتوانید با استفاده از کلاس های .modal-lg یا .modal-sm بر روی .modal-dialog انجام دهید.

خروجی مثال بالا به شکل زیر خواهد بود :

تغییر محتوای پنجره بر اساس دکمه مبدل:(trigger)

اغلب چندین پنجره در یک صفحه وب تقریباً محتوای یکسان با تغییرات بسیار کم دارند.
میتوانید با استفاده از رویدادهای modal ، پنجره های دیالوگ با تفاوت های کم و بر پایه HTML یکسان ایجاد کنید. مثال زیر عنوان پنجره های دیالوگ را بر طبق مقدار ویژگی data-title در دکمه های مبدل، تغییر میدهد.

خروجی مثال بالا به شکل زیر خواهد بود :

آپشن ها :

یک سری آپشن مشخص وجود دارد که میتوانند به تابع modal( ) پاس داده شوند تا عملکرد پنجره دیالوگ را تغییر دهند.

نام	نوع	مقدار پیش فرض	توضیحات
backdrop	boolean یا رشته 'static'	true	شامل یک عنصر modal-backdrop میباشد که میتوانید به صورت دلخواه با تنظیم آن در حالت static مانع بسته شدن پنجره در صورت کلیک در فضای بیرون آن پنجره شوید.
keyboard	boolean	true	پنجره دیالوگ را با فشار دادن کلید escape می بندد.
show	boolean	true	پنجره را زمانی که راه اندازی یا فعال میشود، نمایش میدهد.

میتوانید این آپشن ها را از طریق ویژگی های - data یا جاوا اسکریپت به کار ببرید. جهت استفاده از آپشن ها از طریق data - نام آن آپشن را به انتهای - data اضافه نمایید مانند "data-keyboard="false" :و "data-backdrop="static
با این حال جاوا اسکریپت راه بهتری برای استفاده از این آپشن ها ارائه میکند زیرا از کار تکراری جلوگیری می نماید. در قسمت زیر، تابع (modal(options . را مشاهده کنید تا نحوه آپشن دادن به پنجره ها را با استفاده از جاوا اسکریپت بیاموزید.

توابع :

اینها توابع استاندارد بوت استرپ برای پنجره های دیالوگ میباشند :

(`.modal(options`

این تابع محتوا را مانند یک پنجره دیالوگ فعال میکند. همچنین اجازه میدهد که به آن آپشن دهید.
کد jQuery در مثال زیر، زمانی که کاربر روی ناحیه بیرون از پنجره کلیک میکند، مانع بسته شدن پنجره میشود(یعنی ناحیه سیاه بیرون پنجره).

کد jQuery زیر از بسته شدن پنجره در صورت فشار دادن دکمه escape در کیبورد، جلوگیری میکند.

کد زیر یک پنجره دیالوگ ایجاد میکند که در صورت باز شدن، محتوای داخل خود را از یک فایل خارجی میگیرد.

(`.modal(toggle`

این تابع یک پنجره دیالوگ را به صورت دستی باز و بسته میکند.

(`.modal('show'`

این تابع برای باز کردن یک پنجره دیالوگ استفاده میشود.

(`.modal('hide'`

این تابع برای بستن یک پنجره دیالوگ استفاده میشود.

(`.modal('handleUpdate'`

این تابع پوزیشن پنجره را با توجه به اسکرول گرفتن صفحه نمایش، دوباره تنظیم میکند.
یک مثال رایج برای این سناریو، نمایش دادن عناصر مخفی داخل یک پنجره از طریق جاوا اسکریپت یا بارگذاری محتوا داخل یک پنجره با استفاده از Ajax بعد از باز کردن میباشد :

رویداد ها (Event) :

کلاس modal در بوت استرپ شامل تعداد کمی رویداد میباشد :

event	توضیحات
show.bs.modal	این رویداد به محض اینکه تابع show فراخوانی شد، فعال میشود.
shown.bs.modal	این رویداد زمانی که پنجره برای کاربر قابل رؤیت (visible) شد، فعال میشود. این رویداد تا پایان کامل عملیات transition در CSS منتظر میماند و بعد فعال میشود.
hide.bs.modal	این رویداد به محض اینکه تابع hide فراخوانی شد، فعال میشود.
hidden.bs.modal	این رویداد زمانی که عملیات مخفی بودن پنجره از کاربر پایان می یابد، فعال میشود. این رویداد تا پایان کامل عملیات transition در CSS منتظر میماند و بعد فعال میشود.
loaded.bs.modal	این رویداد زمانی که پنجره محتوا را با استفاده از آپشن remote بارگذاری میکند، فعال میشود.

مثال زیر زمانی که عملیات fade out پنجره کاملاً پایان یابد، یک پیام هشدار به کاربر نشان میدهد :

مطلب بعدی -> ایجاد منوی کشویی با پلاگین Bootstrap

اشتراک گذاری:

مشاهده نمونه های بیشتر

24 تیر 1403

ثبت مکان در گوگل مپ: آموزش ثبت رایگان مکان کسب و کارتان تنها در ۵ گام

20 تیر 1403

اینفوگرافیک چیست؟ انواع، کاربرد ها و مراحل ساخت Infographic

2 خرداد 1402

راهنمای جامع طراحی سایت فروشگاهی

این راهنما شما را با دانش و استراتژی های مورد نیاز طراحی سایت فروشگاهی استثنایی مجهز می کند. برای کشف قدرت طراحی در فروش آنلاین و ایجاد یک برند دیجیتال موفق آماده شوید.

31 اردیبهشت 1402

تایپوگرافی چیست و چگونه از آن در طراحی سایت استفاده کنیم؟

با استفاده از قدرت تایپوگرافی، طراحان می توانند تجربیات دیجیتالی فریبنده و فراموش نشدنی ایجاد کنند که مجذوب، اطلاع رسانی و تأثیر ماندگاری بر روی کاربران می شود. در این مقاله قصد داریم به صورت کامل مفهموم تایپوگرافی در طراحی سایت را برای شما شرح دهیم.

25 اردیبهشت 1402

طرح رنگ چیست و چگونه از آن در طراحی سایت استفاده کنیم؟

در این مقاله، ما به پیچیدگی‌های طرح‌های رنگی در طراحی وب‌ سایت، بررسی اصول تئوری رنگ‌ها، تأثیرات روان‌شناختی رنگ‌ها و ملاحظات عملی برای انتخاب پالت رنگ مناسب می‌پردازیم.

23 اردیبهشت 1402

همه چیز در مورد چیدمان و ناوبری در طراحی سایت

ناوبری از مهم ترین عناصر طراحی سایت است که این مقاله به اهمیت طرح‌بندی و ناوبری در طراحی سایت، ارائه اصول کلیدی، استراتژی‌ها و بهترین شیوه‌ها برای بهینه‌سازی وب‌سایت شما برای موفقیت می‌پردازد.