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

مرجع کار با JS Modal در بوت استرپ 4

دوره های مرتبط با این مقاله

مرجع کار با JS Modal در بوت استرپ 4:

در این درس، به آموزش کار با کلاس ها، خواص و متدهای JavaScript Modal در Bootstrap 4، خواهیم پرداخت. از کادر محاوره ای Modal برای نمایش یک Alert Box یا پیام هشدار و اطلاعات به کاربر در صفحه استفاده می شود.

آموزش کلاس های JS Modal در بوت استرپ 4 :

جدول زیر، کلیه کلاس های کار با JS Modal در بوت استرپ 4 را همراه با توضیح و کاربرد، ارائه کرده است :

کلاس
توضیح
کلاس modal
یک کادر محاوره ای Modal، ایجاد می کند.
کلاس modal-content
این کلاس به کادر مدال استایل هایی مثل خطوط حاشیه (border)، رنگ پس زمینه و .. می دهد. از این کلاس می توان برای اضافه کردن هدر، بدنه و فوتر به Modal استفاده کنید.
کلاس modal-dialog-centered
کادر محاوره ای Modal را از لحاظ عمودی و افقی در وسط صفحه نمایش می دهد.
کلاس modal-dialog-scrollable
نوار پیمایش Scroll را به کادر محاوره ای Modal، اضافه می کند.
کلاس modal-header
استایل بخش هدر (سر عنوان) کادر محاوره ای Modal را تعیین می کند.
کلاس modal-body
استایل بخش بدنه (body) کادر محاوره ای Modal را تعیین می کند.
کلاس modal-footer
استایل بخش پایین (footer) کادر محاوره ای Modal را تعیین می کند. توجه داشته باشید بخش فوتر در کادر مدال به صورت پیش فرض، راست چین است. برای تغییر این وضعیت، از کلاس های justify-content-start یا justify-content-center همراه با کلاس modal-footer، استفاده کنید.
modal-sm
یک کادر محاوره ای Modal با سایز کوچک Small ایجاد می کند.
modal-lg
یک کادر محاوره ای Modal با سایز بزرگ Large ایجاد می کند.
fade
یک حالت افکت انیمیشن یا CSS Transition (باز و بسته شدن تدریجی و آهسته) در هنگام نمایش و مخفی شدن Modal، به آن اضافه می کند.

آموزش فعال کردن Modal با خواص data Attributes :

برای فعال نمودن و نمایش یک کادر محاوره ای Modal توسط یک المنت دیگر، بایستی خواص data-toggle برابر modal و data-target برابر با ID عنصر modal را به آن ها اضافه کنید.در این صورت، با کلیک بر روی آن عنصر، کادر محاوره ای Modal باز خواهد شد.

نکته :

در تگ های <a> بایستی خاصیت data-target را حذف کرده و مقدار خاصیت href آن را برابر با ID عنصر Modal قرار دهید.

مثال : در کد مثال عملی زیر، از یک دکمه button و یک لینک <a> استفاده کرده ایم، که با کلیک بر روی هر کدام، کادر Modal باز خواهد شد :

مثال 1





Open Modal


Open Modal

امتحان کنید

آموزش فعال کردن Modal با جاوا اسکریپت :

توسط قطعه کد جاوا اسکریپت زیر، می توانید کادر Modal را به صورت دستی، فعال کنید :

$("#myModal").modal()
            

آموزش ویژگی ها (options) کادر Modal در Bootstrap 4 :

ویژگی ها (options) را می توانید توسط خواص Data Attributes یا کدهای جاوا اسکریپت به کادر Modal اضافه کنید. برای استفاده از Data Attribute، بایستی نام ویژگی را به خاصیت data-* اضافه کنید، مثل data-show .

نام
نوع
مقدار پیش فرض Default.
توضیح
backdrop
درست يا غلط Boolean یا متنی “Static”.
true
تعیین می کند آیا در هنگام نمایش Modal، پشت کادر حالت تیره و مات، پیدا کند یا خیر.
  • مقدار true، یعنی پشت کادر Modal در صفحه، تیره و مات می شود.
  • مقدار false، یعنی پشت کادر Modal به صورت عادی نمایش داده می شود.
  • اگر مقدار “static” را به کار ببرید، دیگر قادر نخواهید بود با کلیک خارج از محدوده کادر Modal آن را بسته و بایستی دکمه بستن را بزنید.
keyboard.
boolean.
true.
تعیین می کند آیا کادر Modal را می توان با زدن دکمه ESC کیبورد، ببندید یا خیر.
  • true : کادر Modal با زدن دکمه ESC، بسته می شود.
  • false : کادر Modal با زدن دکمه ESC، بسته نمی شود.
show.
boolean.
true.
تعیین می کند آیا کادر محاوره ای Modal، پس از ایجاد صفحه و بارگذاری به صورت خودکار، نمایش داده شود یا خیر.

آموزش کار با متدها (Methods) کادر Modal :

در جدول زیر، لیست کلیه متدها (Methods) کادر محاوره ای Modal را به همراه توضیح و کاربرد، ارائه کرده ایم :

متد
توضیح
متد modal(options)
این متد، با ویژگی های دریافتی، یک کادر Modal را ایجاد می کند. در ادامه به ویژگی ها option های قابل استفاده این متد، پرداخته ایم.
متد modal(“toggle”)
وضعیت کادر Modal را تغییر می دهد (مخفی باشد نشان می دهد و برعکس).
متد modal(“show”)
کادر Modal را باز کرده و نمایش می دهد.
متد modal (“hide”)
کادر Modal را بسته و مخفی می کند.

آموزش کار با رویدادها (Events) کادر محاوره ای Modal :

در جدول زیر، لیست کلیه رویدادها (Events) کادر محاوره ای Modal در bootstrap 4 را به همراه توضیح و کاربرد، ارائه کرده ایم :

رویداد
توضیح
show.bs.modal
این رویداد زمانی رخ می دهد که کادر Modal در حال باز شدن و نمایش است.
shown.bs.modal
زمانی رخ می دهد که کادر Modal باز شده و در حال نمایش است (پس از اتمام عملیات CSS Transition یا مخفی و نمایان شدن تدریجی عنصر).
hide.bs.modal
زمانی رخ می دهد که کادر Modal در حال بستن و مخفی شدن است.
hidden.bs.modal
زمانی رخ می دهد که کادر Modal بسته شده و مخفی است (پس از پایان عملیات CSS Transition یا مخفی و نمایان شدن تدریجی عنصر).
  • 38
  •    44
  • تاریخ ارسال :   1398/09/05

دانلود PDF دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

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

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .