مودال (Modal) بوت استرپ

مودالِ بوت استرپ اساسا یک باکس پاپ آپ است که برای ارائه ی اطلاعات و هشدار به کاربر استفاده می شود.

مودال بوت استرپ، یکی از پاپ آپ های چند منظوره ی جاوا اسکریپت است که به صورت سفارشی ساخته شده و واکنش گرا نیز هست و می تواند در موارد زیر، مورد استفاده قرار گیرد: برای نمایش پاپ آپ های هشدار، فیلم ها و تصاویر در یک وب سایت، برای هشدار دادن به کاربران برای پایان یافتن مهلت و یا برای گرفتنِ اجازه ی دسترسی، قبل از ارسال اطلاعات مهم.

تم های بوت استرپ، راه حل مناسبی را برای بسیاری از مشکلات فراهم می کند.(توصیه می شود دوره آموزشی طراحی سایت و پکیج آموزش طراحی سایت  را مشاهده کنید)

مودال بوت استرپ شامل سه بخش است:

1. سربرگ / The Header
2. بدنه ی پیام / The Message Body
3. فوتر / The footer

جالب ترین چیز در مورد اجرای مودال های بوت استرپ این است که نیازی به نوشتن هیچ کد جاوا اسکریپتی نداریم، همان طور که همه ی کد ها و سبک ها در بوت استرپ، از پیش تعریف شده اند، فقط باید از ترکیب مناسب Markup و Attributes برای اجرای اقدامات مربوطه استفاده کنیم.

تماشای نسخه ی نمایشی زنده به همراه لینک دانلود کد:

دانلود اسکریپت

کد:

برای استفاده از مودالِ بالا، به سادگی، کد زیر را در یک فایل HTML کپی کنید، و کد بوت استرپ می تواند به طور معمول اجرا شود.

شرح کد بوت استرپ با جزییات:

فعال سازی مودال بوت استرپ از طریق ویژگی های داده، به دو جزء نیاز دارد:

1. عنصر کنترل مانند یک دکمه یا لینک
2. عنصر مودال بوت استرپ

• در یک سند، بیرونی ترین نگهدارنده / container از هر نوع مودال بوت استرپ، باید یک شناسه / ID منحصر به فرد داشته باشد (در این مثال id=”myModal“)، به طوری که بتواند از طریق ویژگی های data-target (برای دکمه ها) یا href (برای لینک ها) برای عنصر کنترل کننده، مورد هدف قرار بگیرد.
• ویژگی data-toggle=”modal” برای اضافه کردن بر روی عنصر کنترل، مانند یک دکمه یا لنگر / anchor، لازم است. همچنین ویژگی data-target=”#myModal” یا href=”#myModal” در تغییر وضعیت بر روی یک مودال خاص، مورد نیاز است.
• کلاس .modal-dialog عرض و هم ترازی / alignment افقی و عمودی باکس مودال را تنظیم می کند. در حالی که کلاس .modal-content استایل هایی مانند متن و رنگ پس زمینه، حاشیه ها، گوشه های گرد و غیره را تنظیم می کند.
• عنصر .modal-header ، یک هدر برای مودال تعریف می کند، که معمولا شامل یک عنوان مودال و یک دکمه close است در حالی که عنصر .modal-body شامل محتوای واقعی مانند متن، تصاویر، فرم ها و غیره است. و عنصر .modal-footer فوتر را تعریف می کند که معمولا شامل دکمه های عملکردی برای کاربر است.
• کلاس .fade در عنصر مودال، یک افکت متحرک fading و sliding را در هنگام نمایش و مخفی کردنِ پنجره ی مودال اضافه می کند. اگر می خواهید مودال را به سادگی و بدون هر افکتی نمایش دهید، می توانید این کلاس را حذف کنید.

تنظیم اندازه ی مودال بوت استرپ

بوت استرپ همچنین به ما این امکان را می دهد تا در مورد اندازه ی ماژول ها تصمیم بگیریم، که آیا بزرگ یا کوچک باشند. می توانیم مودال بزرگتر (.modal-lg) یا کوچکتر (.modal-sm) را با اضافه کردن یک کلاس اضافی در .modal-dialog ایجاد کنیم.

فعال سازی مودال با جی کوئری / jQuery

برای کنترل مودال از طریق jQuery، باید تابع .modal() در انتخابگر مودال را فراخوانی / call کنیم:

گزینه های بوت استرپ:

گزینه ها، آن دسته از کد ها هستند که می توانند به عنوان صفتِ داده یا جاوا اسکریپت برای سفارشی کردن ظاهر و بهبودِ ظاهر یک مودال در نظر گرفته شوند.

• پس زمینه / backdrop: می تواند true یا static باشد و تعریف می کند که آیا می خواهید کاربر با کلیک کردن بر روی پس زمینه بتواند مودال را ببندد یا خیر. اگر نمی خواهید زمانی که کاربر، خارج از مودال کلیک کند، مودال بسته شود، برای backdrop، static را انتخاب کنید.
• صفحه کلید / keyboard: اگر true تنظیم شود، مودال از طریق کلید ESC بسته خواهد شد.
• نمایش / show: برای باز کردن و بستن مودال استفاده می شود و می تواند true یا false باشد.
• remote: برای بارگیری از راه دور محتوا، با استفاده از jQuery .load() استفاده می شود. و باید یک صفحه خارجی را در این گزینه مشخص کنید.remote به طور پیش فرض false تنظیم شده است.

رویداد های مودالِ بوت استرپ / Events

می توان رفتار عادی مودالِ بوت استرپ را با استفاده از رویداد های مختلف که در هنگام باز کردن و بستن مودال انجام می شود، سفارشی کرد. این رویداد ها باید با استفاده از روش jQuery .on() محدود شوند.

رویداد های مختلفِ موجود، عبارتند از:

• bs.modal: درست قبل از اینکه مودال باز شود
• bs.modal: پس از این که مودال نمایش داده شود
• bs.modal: درست قبل از این که مودال پنهان شود
• bs.modal: پس از این که مودال بسته است
• bs.modal: هنگامی که محتوای از راه دور با موفقیت در محدوده ی محتوا بارگذاری شود. و با گزینه ی از راه دور / remote که در بالا گفته شد، استفاده می شود.

جدول زیر، نحوه ی پیاده سازی رویداد ها را توضیح می دهد:

نتیجه گیری:

مودال بوت استرپ، یک روش بسیار جمع و جور و آسان برای کار با پاپ آپ / pop-up است. و یکی از بهترین افزونه ها برای بارگذاری محتوا در داخل یک پاپ آپ، بدون نوشتن هیچ گونه جاوا اسکریپت است.

امیدواریم که از خواندن این مقاله لذت بده باشید و مفهوم پاپ آپ و استفاده از آن را دریافت کرده باشید. می توانید نظرات خود را به اشتراک بگذارید و با ما در تماس باشید.