ساخت مودال ، صفحات باز شونده در بوت استرپ 4 ، یکی از مسائلی است که می توانید در قسمت های مختلف سایت از آن استفاده کنید .
صفحات بازشونده ، در قسمت های مختلف سایت مانند صفحات ورود ، جستجو و …. می توان از مودال ها استفاده کرد.
مودال چیست ؟
مودال با استفاده از یک دکمه در صفحه به نمایش در می آید ، با استفاده از مودال توان ساخت یک پاپ آپ را خواهید داشت.
چگونه یک مودال ساخته می شود ؟
با توجه به کد زیر ، شما توان ساخت یک مودال را خواهید داشت :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!-- Button to Open the Modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> Open modal </button> <!-- The Modal --> <div class="modal" id="myModal"> <div class="modal-dialog"> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header"> <h4 class="modal-title">Modal Heading</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> <!-- Modal body --> <div class="modal-body"> Modal body.. </div> <!-- Modal footer --> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button> </div> </div> </div> </div> |
در قسمت اول ، شما دکمه ای برای باز شدن طراحی میکنید ، در قسمت دوم مودال را تعریف می کنید ، داخل مودال به سه قسمت سربرگ ، محتوا و پا ورقی قسیم می شود.
افزودن انیمیشن به مودال
با استفاده از کلاس .fade افکتی برای مودال خود قرار می دهید ، نمونه کدهای انیمیشن را به صورت زیر می توانید در نظر بگیرید :
|
1 2 3 4 5 |
<!-- Fading modal --> <div class="modal fade"></div> <!-- Modal without animation --> <div class="modal"></div> |
سایز مودال
با توجه به قسمت های پیشین دوره رایگان بوت استرپ ، آشناییت با قسمت سایز ها دارید ، اما در کل برای تغییر سایز مودال به سایز خیلی بزرگ از کلاس .modal-xl برای سایز بزرگ از .modal-lg و برای سایز کوچک از .modal-sm به سبک زیر استفاده می شود:
|
1 2 3 4 5 6 7 8 |
<!-- Small Modal --> <div class="modal-dialog modal-sm"> <!-- Large Modal --> <div class="modal-dialog modal-lg"> <!-- Extra Large Modal --> <div class="modal-dialog modal-xl"> |
در حالت کلی سایز مودال ها ، سایز متوسط است .
مودال در وسط صفحه :
در این حالت مودال شما در حالت عمودی و افقی در وسط صفحه قرار میگیرد ، برای این حالت کافی است از کلاس .modal-dialog-centered استفاده کنید :
|
1 |
<div class="modal-dialog modal-dialog-centered"> |
مودال در حالت اسکرول
هنگامی که شما محتوای زیادی در حالت مودال خود قرار میدهید باید وضعیت برای اسکرول کردن نیز قرار دهید ، برای افزودن حالت اسکرول کافی است قطعه کد زیر را قرار دهید :
|
1 |
<div class="modal-dialog"> |
با این وجود ، می توان به جای خود صفحه ، با افزودن .modal-dialog-scrollable به .modal-dialog فقط به داخل صفحه پیمایش کرد:
|
1 |
<div class="modal-dialog modal-dialog-scrollable"> |
از اینکه در این قسمت از اموزش های رایگان بوت استرپ همراه ما بودید بسیار خرسندیم ، پیشنهاد میشود برای مطالعه موارد بیشتر به سایت getbootstrap مراجعه فرمایید.
همچنین می توانید از سایر قسمت های دوره رایگان بوت استرپ 4 هم استفاده فرمایید.
