Share on facebook
Share on twitter
Share on linkedin
Share on email
Share on whatsapp
Share on telegram
Share on print
قسمت بیست و ششم bootstrap : نحوه ی ساخت مودال ( modal ) در بوت استرپ ۴

نویسنده:

مرتضی افضلی

Statistics-rafiki

تعداد بازدید:

Calendar-amico (2)

تاریخ انتشار:

8 , آبان , 1399

Work time-rafiki

زمان تقریبی مطالعه :

3 دقیقه

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

صفحات بازشونده ، در قسمت های مختلف سایت مانند صفحات ورود ، جستجو و …. می توان از مودال ها استفاده کرد.

مودال چیست ؟

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

چگونه یک مودال ساخته می شود ؟

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

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

افزودن انیمیشن به مودال

با استفاده از کلاس .fade افکتی برای مودال خود قرار می دهید ، نمونه کدهای انیمیشن را به صورت زیر می توانید در نظر بگیرید :

سایز مودال

با توجه به قسمت های پیشین دوره رایگان بوت استرپ ، آشناییت با قسمت سایز ها دارید ، اما در کل برای تغییر سایز مودال به سایز خیلی بزرگ از کلاس .modal-xl برای سایز بزرگ از .modal-lg و برای سایز کوچک از .modal-sm به سبک زیر استفاده می شود:

در حالت کلی سایز مودال ها ، سایز متوسط است .

مودال در وسط صفحه :

در این حالت مودال شما در حالت عمودی و افقی در وسط صفحه قرار میگیرد ، برای این حالت کافی است از کلاس .modal-dialog-centered استفاده کنید :

مودال در حالت اسکرول

هنگامی که شما محتوای زیادی در حالت مودال خود قرار میدهید باید وضعیت برای اسکرول کردن نیز قرار دهید ، برای افزودن حالت اسکرول کافی است قطعه کد زیر را قرار دهید :

با این وجود ، می توان به جای خود صفحه ، با افزودن .modal-dialog-scrollable به .modal-dialog فقط به داخل صفحه پیمایش کرد:

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

همچنین می توانید از سایر قسمت های دوره رایگان بوت استرپ ۴ هم استفاده فرمایید.

مرتضی افضلی

مرتضی افضلی

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

تا کنون 56 نفر در کدپز ثبت نام کرده اند.

0 پاسخ به "قسمت بیست و ششم bootstrap : نحوه ی ساخت مودال ( modal ) در بوت استرپ ۴"

ارسال یک پیام

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