آموزش کار با پلاگین modal جهت ساخت پنجره دیالوگ در بوت استرپReviewed by صابر بوستانی on Sep 21Rating: 5.0
ساخت پنجره دیالوگ در بوت استرپ

ساخت پنجره دیالوگ در بوت استرپ

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

میتوانید با استفاده از پلاگین modal در بوت استرپ، به راحتی پنجره های دیالوگ هوشمند و انعطاف پذیر ایجاد نمایید.لطفا در ادامه مطلب با ما همراه باشید…

آموزش کار با پلاگین modal جهت ساخت پنجره دیالوگ در بوت استرپ

میتوان پلاگین ها را به صورت جداگانه با استفاده از “modal.js” و یا بصورت یکجا با استفاده از “bootstrap.js” یا .”bootstrap.min.js” اضافه کرد.

طریقه ساخت modal : مثال زیر نحوه ساخت مودال را نشان میدهد.

1

 

بخش Trigger

برای تریگر کردن (باز کردن) پنجره دیالوگ به یک دکمه یا لینک نیاز دارید سپس دو خاصیت data-* را اضافه نمایید.

  • data-toggle=”modal” پنجره دیالوگ را باز می کند
  • data-target=”#myModal” به ID پنجره دیالوگ اشاره می کند.

 

بخش Modal 

عنصر والد <div> در modal باید دارای یک ID با ارزش یکسان با خاصیت data-target باشد و برای باز کردن پنجره دیالوگ از ان استفاده میشود . (“myModal”) کلاس .modal محتوای <div> در modal را مشخص میکند و توجه را به ان جلب میکند.

کلاس .fade یک افکت جابه جایی را اضافه میکند که باعث محو شدن modal میشود. اگر این افکت را نمیخواهید میتوانید این کلاس را حذف کنید. خاصیت role=”dialog” باعث بهبود دسترسی کسانی میشود که از صفحه خوان ها استفاده میکنند.

کلاس .modal-dialog عرض و ترازبندی مناسب برای پنجره دیالوگ را تنظیم میکند

 

بخش Modal content

عنصر <div> با کلاس class=”modal-content” پنجره دیالوگ را استایل دهی میکند. (کادر،رنگ زمینه و ..) . درون عنصر <div> سرفصل-هدر ، بدنه و فوتر مودال را اضافه کنید .

کلاس .modal-header برای تعریف استایل سرفصل modal استفاده میشود.دکمه <button> درون سرفصل دارای خاصیت data-dismiss=”modal” میباشد که اگر بر روی ان کلیک کنید مودال را میبندد . کلاس .close برای استایل دهی به  دکمه خروج استفاده میشود و کلاس .modal-title به اندازه یک خط سرفصل را تنظیم و استایل دهی میکند.

کلاس .modal-body برای تعریف استابل بدنه ی modal استفاده میشود . در این قسمت میتوانید هر تصویر ، ویدیو ، پاراگراف یا HTML markup ی را اضافه کنید.

کلاس .modal-footer برای تعریف استایل فوتر modal استفاده میشود . توجه کنید که این قسمت به طور پیش فرض به صورت راست چین تراز بندی شده است.

 

اندازه modal

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

کلاس مربوط به سایز را توسط کلاس .modal-dialog توسط عنصر <div> اضافه کنید.

 

modal کوچک :

modal بزرگ :

نکته : به طور پیش فرض modal ها در اندازه متوسط هستند .

منابع کامل modal های بوت استرپ :

برای دستیابی به مرجع کاملی از گزینه ها ، متذ ها ، و رویداد های مودال به این Bootstrap JS Modal Reference لینک مراجعه کنید .