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

در این بخش نحوه ایجاد پنجره دیالوگ با استفاده از 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

---