نمادها

شما اینجا هستید

آموزش Bootstrap 4 جلسه بیست و پنجم (Modal)

در خدمت شما هستیم با آموزش Bootstrap 4 جلسه بیست و پنجم (Modal)

آموزش Bootstrap 4 جلسه بیست و پنجم (Modal) از سری آموزش های تک قسمتی است.

 

مودال

قبلا در بوت استرپ ۳ درباره ساخت مودال صحبت کردیم اما برای آن دسته از عزیزان که نمیدانند مودال (modal) چیست باید بگوییم پنجره ای است که مانند پاپ آپ در همان صفحه باز میشود و اطلاعات آن مجزا از صفحه به نمایش در می آید و باز و بسته کردن آن تاثیری در صفحه ندارد . امکانات جدیدی به مودال اضافه شده است که در این آموزش به آن میپردازیم.

 

ساخت Modal

برای ساخت مودال به چند چیز نیاز داریم که مورد به مورد آن را بررسی میکنیم اول از هر چیز نیاز به یک دکمه داریم که مودال را با آن باز کنیم پس یک تگ  button با attribute با نام data-toggle و مقدار modal میسازیم همچنین نیاز به یک مقدار کلیدی داریم که ارتباط دکمه و مودال را برقرار کند پس attribute با نام data-target و مقدار یک آیدی دلخواه میسازیم .

حال نوبت ساخت پنجره مودال است یک div با کلاس modal  میسازیم و به آن id با نام دلخواهی که بالا تعریف کردیم اضافه میکنیم. داخل این div یک div دیگر با کلاس modal-dialog میسازیم که کل محتوای مودال ما داخل آن قرار دارد. محتویات مودال که شامل ۳ بخش است را در داخل div با کلاس modal-content قرار میدهیم آن سه قسمت به شرح زیر است

  • header : در این قسمت هدر مودال قرار میگیرد که یک div با کلاس modal-header است.
  • body : در این قسمت محتوای مودال قرار میگیرد که یک div با کلاس modal-body است.
  • footer : در این قسمت فوتر مودال قرار میگیرد که یک div با کلاس modal-footer است.

همچنین شما با کلاس modal-title در بخش header میتوانید برای مودال خود تایتل بگذارید.

برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

 

اضافه کردن انیمیشن به مودال

برای اضافه کردن انیمیشن یا همان افکت برای ظاهر شدن و محو شدن مودال نیاز به انجام کار پیچیده ای نیست تنها با یک کلاس ساده بوت استرپ میتوانید این کار را انجام دهید کافیست کلاس fade را در div که کلاس modal را دارد قرار دهید یعنی دقیقا در کنار کلاس modal کلاس fade را قرار دهید برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

سایز مودال

شما میتوانید اندازه مودال های خود را تعیین کنید بوت استرپ برای این مورد ۳ کلاس تعریف کرده که برای شما لیست میکنیم کافیست به هر سایزی که نیاز دارید کلاس آن را در کنار کلاس modal-dialog بنویسید:

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

برای واضح شدن موضوع میتوانید از کلاس زیر کمک بگیرید:

 

قرار دادن مودال در وسط صفحه

تا به اینجا تمام مودال هایی که ساختیم در قسمت بالای صفحه قرار گرفتند اگر قصد دارید مودالی بسازید که در وسط صفحه قرار گیرد کافیست از کلاس modal-dialog-centered در کنار کلاس modal-dialog استفاده کنید با همین یک کلاس مودال شما وسط صفحه قرار میگیرد و از ۴ طرف صفحه به یک اندازه فاصله میگیرد. برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

اسکرول خوردن مودال

در حالت عادی اگر محتویات مودال شما زیاد باشد صفحه بعد از باز شدن مودال اسکرول میخورد اگر قصد دارید جلو این کار را بگیرید و اسکرول را داخل خود مودال انجام دهید کافیست از کلاس modal-dialog-scrollable در کنار کلاس modal-dialog استفاده کنید از این پس مودال شما در داخل خود اسکرول میخورد برای واضح شدن موضوع میتوانید از کد زیر کمک بگیرید:

 

برای راحتی شما عزیزان کدی شامل کل آموزش برای شما قرار میدهیم:

 

می توانید دیگر قسمت ها را در لینک زیر ببینید:

آموزش Bootstrap 4 جلسه بیست و چهارم (Carousel)

آموزش Bootstrap 4 جلسه بیست و ششم (Tooltip)

 

شما میتوانید ویدیو این آموزش را به صورت آنلاین ببینید:

همچنین در صورت علاقه می توانید این آموزش را از باکس دانلود موجود در زیر همین پست دانلود نمایید.

اگر این مطلب آموزنده بود به ما امتیاز دهید
1 ستاره2 ستاره3 ستاره4 ستاره5 ستاره (2 رای, میانگین: 5٫00 امتیاز از 5)
Loading...

این یک فایل mp4 تصویری است که با پلیر های ویدیویی قابل اجرا می باشد

دانلود آموزش Bootstrap 4 جلسه بیست و پنجم (Modal): نوع فایل:mp4 حجم فایل:27.77 مگابایت

هر پلیر اجرا کننده فایل ویدیویی

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

*

code

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