مودال ها
از افزونه مودال جاوااسکریپت بوت استرپ برای افزودن مودال هایی به وب سایت خود برای لایت باکس ها، اطلاع رسانی های کاربر یا محتوای کاملا سفارشی استفاده کنید.
مثال های پایه
در زیر مثال های پایه مودال ها آورده شده است، کافی است با کلیک بر روی دکمه های زیر، یک دموی مودال را تغییر وضعیت دهید.
| مرجع کلاس | جزئیات |
|---|---|
.modal-{sm|lg|xl} |
برای اندازه مودال از .modal-dialog استفاده کنید. به عنوان مثال. <div class="modal-dialog modal-lg">......</div>
|
.modal-dialog-{top|bottom} |
برای موقعیت مودال از .modal-dialog استفاده کنید. به عنوان مثال. <div class="modal-dialog modal-dialog-top">......</div>
|
.modal-body-{sm|md|lg} |
برای شکاف داخلی مودال از .modal-body استفاده کنید. به عنوان مثال. <div class="modal-body modal-body-lg">......</div>
|
.zoom |
برای افکت بزرگنمایی از .modalاستفاده کنید. به عنوان مثال. <div class="modal fade zoom">...</div>
|
|
همچنین کلاس |
|
مثال کد
<!-- کد راه انداز مودال -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalDefault">مودال پیش فرض</button>
<!-- کد محتوای مودال -->
<div class="modal fade" tabindex="-1" id="modalDefault">
<div class="modal-dialog" role="document">
<div class="modal-content">
<a href="#" class="close" data-dismiss="modal" aria-label="بستن">
<em class="icon ni ni-cross"></em>
</a>
<div class="modal-header">
<h5 class="modal-title">عنوان مودال</h5>
</div>
<div class="modal-body">
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.</p>
</div>
<div class="modal-footer bg-light">
<span class="sub-text">متن پاورقی مودال</span>
</div>
</div>
</div>
</div>
مودال مورد استفاده
چند مثال مورد استفاده از مودال ها که به توسعه پروژه های شما کمک می کند.
