نمادها

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

آموزش Bootstrap جلسه سی ام (Modal)

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

آموزش Bootstrap جلسه سی ام (Modal) از سری آموزش های تک قسمتی است

سلام برنامه در این آموزش نحوه ساخت مودال را آموزش می دهد

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

در بوت استرپ با Data-toggle=modal  می توانید مودال را معرفی کنید

همچنین با کلاس های خود بوت استرپ می توانید سایز مودال را نیز تعیین کنید

مواردی مثل دکمه close و … نیز با کلاس ها به راحتی قابل راه اندازی است

 

برای ساخت مودال نیاز با فایل modal.js و یا فایل bootstrap.js داریم استفاده از یکی از ۲ فایل کفایت میکند هر دو فایل را با هم اجرا نکنید.

ساخت مودال

همانطور که گفتیم برای ساخت مودال نیاز به اجرای فایل js آن است که اگر شما از بوت استرپ استفاده میکنید این فایل را قبلا اضافه کرده اید. برای داشتن یک Modal شما ابتدا باید یک دکمه ای داشته باشید که با کلیک روی آن مودال باز شود پس قبل از هر چیز یک button نیاز داریم که برای اجرا کردن مودال باید به آن data-toggle اضافه کنید با مقدار modal و همچنین برای ارتباط دکمه با مودال نیاز به data-target دارید که در آن باید id مودال خود را اضافه کنید که ما اینجا از آیدی myModal استفاده میکنیم.

مقدار data-toggle برای شما پنجره مودال را باز میکند. اما برای ساخت محتوای مودال نیز نیاز به چند div و کلاس های مخصوص مودال دارید. در اولین div ما از کلاس modal استفاده میکنیم. ما از role با مقدار dialog استفاده میکنیم این attribute این امکان را میدهد که کاربران شما با هر دستگاهی که سایت شما را باز کردند با نمایش مودال مشکلی نداشته باشند.

نمایش modal  در دستگاه های مختلف

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

  • هدر مودال : این قسمت اطلاعاتی مانند نام مودال، دکمه خروج یا همان close مدال در آن قرار میگیرد و کلاس آن modal-header است.
  • نام مودال: در این قسمت title قرار میگیرد که کلاس آن modal-title است.
  • اطلاعات مودال : در این قسمت کل اطلاعات مودال قرار میگیرد و با کلاس modal-content نمایش داده میشود.
  • بدنه مودال : مانند قسمت body سایت است و با کلاس modal-body نمایش داده میشود.
  • فوتر مودال : همانند فوتر سایت است و با کلاس modal-footer نمایش داده میشود.

علاوه بر موارد گفته شده مودال شامل موارد دیگری نیز هست مواردی مثل دکمه خروج که کلاس close و attribute با نام data-dismiss و مقدار modal میگیرد. توجه داشته باشید هرجا از data-dismiss استفاده کردیم آن دکمه قابلیت بستن مودال را به خود میگیرد.

برای واضح تر شدن مواردی گه گفتیم کد آماده مودالی برا برای شما قرار میدهیم که شامل تمام موارد گفته شده است:

سایز مودال

آخرین مورد این بخش مربوط به اندازه مودال ها است که با کلاس های زیر نجام میشود.
برای این کار باید از ۲ کلاس با هم استفاده کنیم یکی کلاس modal-dialog و دیگری کلاس modal-sm که البته جای sm میتوانید مقادیر lg و… را نیز بگذارید.

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

 

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

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

آموزش Bootstrap جلسه سی و یکم (Tooltip)

 

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

 

و یا آن را در آپارات ببینید:

همچنین در صورت علاقه می توانید این آموزش را از باکس دانلود موجود در زیر همین پست دانلود نمایید
اگر این مطلب آموزنده بود به ما امتیاز دهید
1 ستاره2 ستاره3 ستاره4 ستاره5 ستاره (4 رای, میانگین: 4٫75 امتیاز از 5)
Loading...

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

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

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

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

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

*

code

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