پلاگین MODAL در بوت استرپ ( بررسی کامل )

در این جلسه از دوره آموزش بوت استرپ به بررسی پلاگین MODALدر بوت استرپ می پردازیم.

پلاگین MODAL چیست ؟

• این پلاگین در واقع یک پنجره پاپ آپ است که به وسیله آن می توانید محتوای پنهان وب سایت خود را به کاربر نمایش دهید.
• این پلاگین در طراحی سایت کمک می کند که بتوان تجربه کاربری بهتری را برای کاربران ایجاد کرد.

نحوه ایجاد یک مودال در بوت استرپ چگونه است ؟

در مرحله اول : باید پلاگین modal را به بوت استرپ اضافه کرد.پلاگین مودال را  می توان به دو صورت زیر به بوت استرپ اضافه کرد :

• با اضافه کردن فایل modal.js به صورت جداگانه.
• به طور کامل، با استفاده از فایل های bootstrap.js و یا bootstrap.min.js .

درمرحله دوم :  کدهای زیر را در پروژه وارد کنید در ادامه مفصل در مورد کدها توضیح خواهم کرد.

<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">

<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">&times;</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>متنی که در پاپ آپ نمایش داده می شود.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

بعد از اینکه روی دکمه بالا کلیک کردید پنجره پاپ آپ برای شما ظاهر می شود.

بیشتر بخوانید : پیجر در بوت استرپ ( بررسی کامل در بوت استرپ )

توضیحات در مورد پلاگین MODAL :
تشریح بخش Trigger:

بخش tigger در پلاگین modal را باید در دو مرحله ایجاد کرد.

• باید متن کلیک برای کاربر ایجادشود که این کار را می توان با یک دکمه یا یک لینک انجام داد.
• درون تگ button (در مثال بالا از دکمه استفاده شده است.) ازدوخصوصیت زیر استفاده کنید.
• “data-toggle=”modal : این ویژگی با مقدار modal برای باز کردن پنجره مودال استفاده می شود.
• ” data – target = “#myModal : پلاگین modal را باید با یک آی دی منحصر به فرد برای دکمه بوت استرپ معرفی کرد.

تشریح بخش modal :

• به عنصر والد modal یا همان تگ <div> یک آی دی منحصربه فرد داده شده است که در مرحله قبل با ویژگی data – target فراخوانی شده است.
• کلاس modal. این کلاس محتوای درون تگ div را به یک مودال تبدیل می کند.
• کلاس fade. این کلاس افکت محو شدن را به مودال اضافه می کند که به صورت اختیاری است و می توانید آن را حذف کنید.
• ویژگی “role=”dialog :خصوصیت “role=”dialog دسترسی کسانی که از صفحه خوان ها استفاده می کنند را بهبود می بخشد.
• کلاس modal-dialog : این کلاس عرض و مارجین مناسب را به مودال می دهدوروی نحوه نمایش هم تاثیر دارد.

تشریح بخش Modal content:

• کلاس modal-content : ظاهر بخش محتوای مودال را تنظیم می کند.در واقع رنگ پس زمینه و حاشیه ای که به محتوا داده می شود با این کلاس تنظیم می شود.
• کلاس modal-header : ظاهر بخش header مودال را تنظیم می کند.
• “data-dismiss=”modal : این ویژگی به دکمه اعمال می شود تا زمانی که روی آن کلیک کردید مودال بسته شود.
• کلاس close : این کلاس یک علامت ضربدر را ایجاد می کند که با کلیک روی آن می توان مودال را بست.
• کلاس modal-title : این کلاس عنوان هدر را استایل دهی می کند.
• کلاس modal-body. برای تعریف یک استایل، برای قسمت بدنه ی مودال استفاده می شود. در آن قسمت می توانید هر نوع کد اچ تی ام ال را قرار دهید مانند: پاراگراف ها و عکس ها و ویدئوها و … .
• کلاس modal-footer. برای تعریف یک استایل، برای قسمت footer از مودال استفاده می شود. توجه داشته باشید که این قسمت، به طور پیش فرض راست چین می باشد.

اندازه MODAL :

در بوت استرپ کلاس های از پیش تعریف شده ای وجود دارند که با استفاده از آنها می توان اندازه پنجره مودال را تغییر داد.با ما همراه باشید تا آنها را بررسی کنیم.برای نمایش پنجره مودال در سایز کوچک از کلاس modal-sm استفاده می شود.

<div class="modal-dialog modal-sm">

<div class="modal-dialog modal-lg">

برای نمایش پنجره مودال در سایز بزرگ از کلاس modal-lg استفاده شده است.