آموزش طراحی وب و وب سایت

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

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

 

مدال ها یکی از زیبا ترین بخش ها در راحی وب میباشندکه اگر بخواهید با کد نویسی از صفر از انها استفاده کنید کار خیلی سخت میشه.اما بوت استرپ این قابلیت رو در خودشگنجانده و نیازی به کد نویسی پیشرفته نداریم و میتونیم به اسونی از این قابلیت ها استفاده کنیمو یک مدال حرفه ای بسازیم.همانطور که میدانیم نحوه استفاده از پلاگین های مختلف در بوت استرپ بااستفاده از data-toggle میباشد که ما در این کد مشخص میکنیم که چه پلاگینی در بوت استرپ اجرا شد برای مثالب می ویسیم modal یا tooltip و… که میتوان هر پلاگینی را فراخوانی کرد.

کد زیر یک کد اسان برای ساخت مدال حرفه ای در بوت استرپ میباشد.

برای راه اندازیِ پنجره ی Modal، باید از یک دکمه یا یک لینک استفاده کنید. پس از این مرحله، نیاز است که دو خصوصیتِ data-* را اضافه نمود:

  • خصوصیتِ data-toggle=”modal” پنجره ی Modal را باز می کند.( این خاصیت باید به دکمه یا متنی که قرار روی ان کلیکشود و مدال باز شود باید داده شود)
  • خصوصیتِ data-target=”#myModal” به آی دیِ Modal اشاره می کند. ( این خاصیت باید به دکمه یا متنی که قرار روی ان کلیکشود و مدال باز شود باید داده شود)

نکته اول : اما بریم و به توضیح مثال بالا بپردازید.اید ما در صفحه ای بخواهیم چندین مدال بسازیم.بنابر این باید برای هر مدال خودمان یک ای دی در نظر بگیریم تا قاطی نشوند.برای این کار باید به div مادر در مدال خودمان یک ID بدهیم و این ای دی باید با میزان مقداری که در داخل data-target=”#myModal” قرار میگیرد یکی باشد.مث مثال بالا که ای دی هر دو ( هم دکمه و هم دایو مادر مدال ) myModal میباشد.

نکته دوم: نکته دومی که باید در نظر بگیریم این است که بای به دایو کلاس مادر در مدال خودمان حتما یک class به نام modal بسازیم که محتوای <div> را بعنوانِ یک Modal تعریف نموده و focus را به آن انتقال می دهد.

نکته سوم: در مثالی که زده شد اگر مشاهده کنید در کنار کلاس modal یک عدد کلاس دیگر به نام fade قرار دارد وجود دارد که یک افکتِ transition را اضافه میکند. این افکت موجب می شود که Modal به هنگام استفاده Fade in یا Fade out شود. اگر تمایلی به استفاده از این افکت ندارید آنرا حذف کنید.

نکته چهارم: عنصرِ <div> همراه با خصوصیتِ class=”modal-content” ، Modal را اسلاید بندی می کند (استایل هایی از قبیل border، background-color، و غیره). درونِ این عنصرِ ، header، body، و footer مربوط به Modal را وارد نمایید.
برای تعریفِ استایلِ مربوط به هِدرِ Modal، از کلاسِ .modal-header استفاده می شود. عنصرِ <button> که درونِ header قرار دارد، دارای خصوصیتِ data-dismiss=”modal” می باشد. این خصوصیت موجبِ باز و بسته شدنِ Modal به هنگام کلیک بر روی آن می گردد. کلاسِ .close موجبِ استایل بندیِ دکمه ی بستن close))، و کلاسِ .modal-title ، header را با line-height مناسب، استایل دهی می کند
کلاسِ .modal-body برای تعیینِ استایلِ مربوط به بدنه ی Modal به کار گرفته می شود. در این قسمت می توان هرگونه HTML markup از قبیلِ پاراگراف ها، تصاویر، و ویدئوها را اضافه نمود.
از کلاسِ .modal-footer برای تعیینِ استایلِ مربوط فوترِ Modal استفاده می شود. توجه داشته باشید که طبقِ پیش فرض، این قسمت به صورتِ راست چین می باشد.

نکته پنجم: برای تغیر سایز Modal های کوچک از کلاسِ .modal-sm ، و برای تغییر سایز Modal های بزرگ از کلاسِ .modal-lg استفاده نمایید. به طور پیش فرض، Modal ها دارای اندازه ی متوسط (Medium) می باشند.

مانند مثال های زیر، کلاسِ سایزِ مورد نظر را به همراهِ کلاسِ .modal-dialog به عنصرِ <div> اضافه کنید:

 

آموزش کار با پلاگین modal در بوت استرپ
4.5 از 2 رای
برچسب ها

سعید جوشنی

آرزوی قلبی من خدمت برای تمام دوستداران وردپرس در ایران نشر محصولاتی با حداکثر کیفیت و بهترین پشتیبانی می باشد ، به امید روزی که ترفند های وردپرس خدمتگذارترین وردپرسی ایران شود ..!

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

دیدگاهتان را بنویسید

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

بستن
بستن