انگلیسی
فرانسوی
اسپانیایی
آلمانی
ایتالیایی
نمای معین
در زیر یک مثال مودال ایستا (به معنای آن است موقعیت و نمایش داده شود نادیده گرفته شده اند). شامل سرصفحه مودال، بدنه معین (الزامی برای بالشتک، و پاورقی معین (اختیاری). ما از شما میخواهیم که در صورت امکان، سرصفحههای معین را با کنشهای رد کردن درج کنید، یا اقدام رد صریح دیگری ارائه دهید.
<div class="modal d-block position-relative z-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalLabel">🌟 Exciting Updates!</h5>
<button type="button" class="btn-close icon-btn-sm" data-bs-dismiss="modal" aria-label="Close">
<i class="ri-close-large-line fw-semibold"></i>
</button>
</div>
<div class="modal-body">
<h2 class="fs-5 mb-3">Welcome to Our Platform!</h2>
<p class="mb-4">We're thrilled to share the latest features designed to enhance your experience:</p>
<ul class="list-group">
<li class="list-group-item border-0 py-1">
<i class="ri-search-line me-2 text-primary"></i>Enhanced Search Functionality
</li>
<li class="list-group-item border-0 py-1">
<i class="ri-bar-chart-line me-2 text-success"></i>Improved Analytics Dashboard
</li>
<li class="list-group-item border-0 py-1">
<i class="ri-user-line me-2 text-warning"></i>User-Friendly Interface Updates
</li>
</ul>
<p class="mt-4 mb-0">Join us as we continue to evolve and innovate!</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save Changes</button>
</div>
</div>
</div>
</div>حالت پیش فرض
با کلیک کردن روی دکمه زیر، یک نسخه آزمایشی مودال کار را تغییر دهید. از بالای صفحه به پایین می لغزد و محو می شود.
<!-- Default Modal Button -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#defaultModal">
Launch Default Modal
</button>
<!-- start:: Default Modal -->
<div class="modal zoom-in" id="defaultModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalLabel">
🚀 Get Ready for Our Next Event!
</h5>
<button type="button" class="btn-close icon-btn-sm" data-bs-dismiss="modal" aria-label="Close">
<i class="ri-close-large-line fw-semibold"></i>
</button>
</div>
<div class="modal-body">
<h2 class="fs-5 mb-3">Join Us for an Exclusive Webinar!</h2>
<p class="mb-4">We're excited to invite you to our upcoming webinar, where you'll learn:</p>
<ul class="mt-3 list-group">
<li class="list-group-item border-0">
<i class="ri-bar-chart-line me-2 text-primary"></i>Tips and tricks for maximizing productivity
</li>
<li class="list-group-item border-0">
<i class="ri-user-heart-line me-2 text-success"></i>Networking opportunities with industry leaders
</li>
<li class="list-group-item border-0">
<i class="ri-search-line me-2 text-warning"></i>Insights into the latest trends and technologies
</li>
</ul>
<hr class="my-4">
<div class="text-center">
<p class=" mb-1">📅 <span class="text-primary">Date:</span> September 30, 2024</p>
<p class=" mb-1">🕒 <span class="text-primary">Time:</span> 3:00 PM - 4:00 PM (EST)</p>
<p class=" mb-4">🔗 <span class="text-primary">Location:</span> Online (link to be provided upon registration)</p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Register Now</button>
</div>
</div>
</div>
</div><!--End modal-->پس زمینه ایستا
وقتی پسزمینه روی استاتیک تنظیم میشود، مودال هنگام کلیک کردن در خارج از آن بسته نمیشود. روی دکمه زیر کلیک کنید تا آن را امتحان کنید.
<!-- Static Modal Button -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
Launch static backdrop modal
</button>
<!-- start:: Static Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
<button type="button" class="btn-close icon-btn-sm" data-bs-dismiss="modal" aria-label="Close">
<i class="ri-close-large-line fw-semibold"></i>
</button>
</div>
<div class="modal-body">
<p class="mb-0">Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div><!--End modal-->پیمایش مطالب طولانی
همچنین میتوانید یک مودال قابل پیمایش ایجاد کنید که با اضافه کردن بدنه مودال را اسکرول کنید .modal-dialog-scrollable به .modal-dialog.
<!-- Scrollable Modal Button -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#scrollable">
Launch Scrollable modal
</button>
<!-- start:: Scrollable Modal -->
<div class="modal zoom-in" id="scrollable" data-bs-keyboard="false" tabindex="-1" aria-labelledby="scrollableLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="scrollableLabel">Modal title</h5>
<button type="button" class="btn-close icon-btn-sm" data-bs-dismiss="modal" aria-label="Close">
<i class="ri-close-large-line fw-semibold"></i>
</button>
</div>
<div class="modal-body">
<p>This is some placeholder content to show the scrolling behavior for modals. We use repeated line breaks to demonstrate how content can exceed minimum inner height, thereby showing inner scrolling. When content becomes longer than the predefined max-height of modal, content will be cropped and scrollable within the modal.</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p>This content should appear at the bottom after you scroll.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div><!--End modal-->عمودی در مرکز
اضافه کنید .modal-dialog-centred به .modal-dialog برای مرکزیت عمودی مودال.
<!-- Centered Modal Button -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#centered">
Vertically Centered modal
</button>
<!-- start:: Centered Modal -->
<div class="modal zoom-in" id="centered" data-bs-keyboard="false" tabindex="-1" aria-labelledby="centeredLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="centeredLabel">Modal title</h5>
<button type="button" class="btn-close icon-btn-sm" data-bs-dismiss="modal" aria-label="Close">
<i class="ri-close-large-line fw-semibold"></i>
</button>
</div>
<div class="modal-body">
<p class="mb-0">Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div><!--End modal-->راهنمای ابزار و پاپ اور
نکات ابزار و پاپ اورها در صورت نیاز می توان در مودال ها قرار داد. هنگامی که مودال ها بسته می شوند، هر راهنمایی ابزار و پاپ اور درون نیز به طور خودکار رد می شود.
<!-- Tooltips and popovers Modal Button -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#popovers">
Tooltips and Popovers modal
</button>
<!-- start:: Tooltips and popovers Modal -->
<div class="modal zoom-in" id="popovers" data-bs-keyboard="false" tabindex="-1" aria-labelledby="popoversLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content rounded-4 shadow">
<div class="modal-header bg-gradient text-white">
<h5 class="modal-title" id="popoversLabel">✨ Discover Exciting Features!</h5>
<button type="button" class="btn-close icon-btn-sm" data-bs-dismiss="modal" aria-label="Close">
<i class="ri-close-large-line fw-semibold"></i>
</button>
</div>
<div class="modal-body">
<h2 class="fs-5 text-primary">🎉 Popover in a Modal</h2>
<p>
Experience our interactive feature:
<button type="button" class="btn btn-primary" data-bs-custom-class="popover-primary" data-bs-placement="top" data-bs-toggle="popover" title="✨ Primary Popover" data-bs-content="This is a delightful popover, show some love! 💖">
Click Me!
</button>
to unveil a surprise.
</p>
<hr>
<h2 class="fs-5 text-success">💡 Tooltips in Action</h2>
<p>
Hover over these links for more info:
<a href="#" data-bs-toggle="tooltip" title="Tooltip with additional details! 🌟">This link</a>
and
<a href="#" data-bs-toggle="tooltip" title="Learn more here! 🌈">that link</a>.
</p>
<hr>
<div class="text-center mt-4">
<img src="assets/images/avatar/avatar-2.jpg" alt="Exciting Feature" class="img-fluid rounded-circle shadow-sm" />
<p class="mt-2">Join our community and stay updated with the latest features!</p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save Changes</button>
</div>
</div>
</div>
</div><!--End modal-->جابهجایی بین حالتها
جابهجایی بین چند حالت با چند قرار دادن هوشمندانه data-bs-target و data-bs-toggle صفات برای مثال، میتوانید یک مودال بازنشانی رمز عبور را از داخل یک مودال که قبلاً باز شده است تغییر دهید. لطفاً توجه داشته باشید که چندین مودال را نمی توان همزمان باز کرد - این روش به سادگی بین دو مودال جداگانه جابجا می شود.
<button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal">Open first modal</button>
<div class="modal zoom-in" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title fs-5" id="exampleModalToggleLabel">Modal 1</h2>
<button type="button" class="btn-close icon-btn-sm" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Show a second modal and hide this one with the button below.
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal">Open second modal</button>
</div>
</div>
</div>
</div><!--End modal-->
<div class="modal zoom-in" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title fs-5" id="exampleModalToggleLabel2">Modal 2</h2>
<button type="button" class="btn-close icon-btn-sm" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Hide this modal and show the first with the button below.
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal">Back to first</button>
</div>
</div>
</div>
</div><!--End modal-->محتوای مودال متفاوت
آیا یک دسته دکمه دارید که همگی یک مودال را با محتویات کمی متفاوت راه اندازی می کنند؟ استفاده کنید event.relatedTarget and HTML data-bs-* attributes to vary the contents of the modal depending on which button was clicked.
در زیر یک نسخه آزمایشی زنده و به دنبال آن HTML و جاوا اسکریپت وجود دارد. برای اطلاعات بیشتر، اسناد رویدادهای مودال را برای جزئیات بیشتر بخوانید مرتبط با هدف.
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@getbootstrap">Open modal for @getbootstrap</button>
<div class="modal zoom-in" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title fs-5" id="exampleModalLabel">New message</h2>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-3">
<label for="recipient-name" class="col-form-label pt-0">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div>
<label for="message-text" class="col-form-label pt-0">Message:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div><!--End modal-->اندازه معین
با اضافه کردن کلاس های اندازه خاص مانند، اندازه یک مودال بوت استرپ را تنظیم کنید .modal-sm برای کوچک، .modal-lg برای بزرگ، یا .modal-xl برای فوق العاده بزرگ به <div class="modal-dialog">.
<!-- Extra Large Modal Size Button -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#extraLargeModel">
Extra Large Modal
</button>
<!-- Large Modal Size Button -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#largeModel">
Large Modal
</button>
<!-- Small Modal Size Button -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#smallModel">
Small Modal
</button>
<!-- start:: Extra Large Modal Size -->
<div class="modal zoom-in" id="extraLargeModel" data-bs-keyboard="false" tabindex="-1" aria-labelledby="extraLargeModelLabel" aria-hidden="true">
<div class="modal-dialog modal-xl modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="extraLargeModelLabel">Modal title</h5>
<button type="button" class="btn-close icon-btn-sm" data-bs-dismiss="modal" aria-label="Close">
<i class="ri-close-large-line fw-semibold"></i>
</button>
</div>
<div class="modal-body">
<p class="mb-0">Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div><!-- end:: Extra Large Modal Size -->
<!-- start:: Large Modal Size -->
<div class="modal zoom-in" id="largeModel" data-bs-keyboard="false" tabindex="-1" aria-labelledby="largeModelLabel" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="largeModelLabel">Modal title</h5>
<button type="button" class="btn-close icon-btn-sm" data-bs-dismiss="modal" aria-label="Close">
<i class="ri-close-large-line fw-semibold"></i>
</button>
</div>
<div class="modal-body">
<p class="mb-0">Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div><!-- end:: Large Modal Size -->
<!-- start:: Small Modal Size -->
<div class="modal zoom-in" id="smallModel" data-bs-keyboard="false" tabindex="-1" aria-labelledby="smallModelLabel" aria-hidden="true">
<div class="modal-dialog modal-sm modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="smallModelLabel">Modal title</h5>
<button type="button" class="btn-close icon-btn-sm" data-bs-dismiss="modal" aria-label="Close">
<i class="ri-close-large-line fw-semibold"></i>
</button>
</div>
<div class="modal-body">
<p class="mb-0">Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div><!-- end:: Small Modal Size -->نمونه مودال های تمام صفحه
با افزودن، محتوای طولانی را در حالت Bootstrap مدیریت کنید .modal-dialog-scrollable به <div class="modal-dialog">. این به بدنه مودال اجازه می دهد در حالی که سرصفحه و پاورقی ثابت نگه داشته شود، حرکت کند.
| کلاس | در دسترس بودن |
|---|---|
مودال-تمام صفحه |
همیشه |
.modal-fullscreen-sm-down |
576px |
.modal-fullscreen-md-down |
768px |
.modal-fullscreen-lg-down |
992px |
.modal-fullscreen-xl-down |
1200px |
.modal-fullscreen-xxl-down |
1400px |
<!-- Scrollable Modal Button -->
<div class="d-flex align-items-center gap-3 flex-wrap">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreen">Full Screen</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreenSm">Full Screen below sm</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreenMd">Full Screen below md</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreenLg">Full Screen below lg</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreenXl">Full Screen below xl</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalFullscreenXxl">Full Screen below xxl</button>
</div>
<!-- Modals -->
<div class="modal zoom-in" id="exampleModalFullscreen" tabindex="-1" aria-labelledby="exampleModalFullscreenLabel" aria-hidden="true">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalFullscreenLabel">Fullscreen Modal</h5>
<button type="button" class="btn-close icon-btn-sm" data-bs-dismiss="modal" aria-label="Close">
<i class="ri-close-large-line fw-semibold"></i>
</button>
</div>
<div class="modal-body">
<p class="mb-2 fw-semibold">This is a <span class="highlight">fullscreen modal</span> that occupies the entire viewport.</p>
<p class="m-0">It is useful for displaying important content without distractions.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<div class="modal zoom-in" id="exampleModalFullscreenSm" tabindex="-1" aria-labelledby="exampleModalFullscreenSmLabel" aria-hidden="true">
<div class="modal-dialog modal-fullscreen-sm-down">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalFullscreenSmLabel">Fullscreen below sm</h5>
<button type="button" class="btn-close icon-btn-sm" data-bs-dismiss="modal" aria-label="Close">
<i class="ri-close-large-line fw-semibold"></i>
</button>
</div>
<div class="modal-body">
<p class="mb-2 fw-semibold">This modal is designed to be <span class="highlight">fullscreen below 576px</span>.</p>
<p class="m-0">It ensures a better viewing experience on small devices.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<div class="modal zoom-in" id="exampleModalFullscreenMd" tabindex="-1" aria-labelledby="exampleModalFullscreenMdLabel" aria-hidden="true">
<div class="modal-dialog modal-fullscreen-md-down">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalFullscreenMdLabel">Fullscreen below md</h5>
<button type="button" class="btn-close icon-btn-sm" data-bs-dismiss="modal" aria-label="Close">
<i class="ri-close-large-line fw-semibold"></i>
</button>
</div>
<div class="modal-body">
<p class="mb-2 fw-semibold">This modal will appear <span class="highlight">fullscreen below 768px</span>.</p>
<p class="m-0">Ideal for mid-sized screens, allowing for more content visibility.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<div class="modal zoom-in" id="exampleModalFullscreenLg" tabindex="-1" aria-labelledby="exampleModalFullscreenLgLabel" aria-hidden="true">
<div class="modal-dialog modal-fullscreen-lg-down">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalFullscreenLgLabel">Fullscreen below lg</h5>
<button type="button" class="btn-close icon-btn-sm" data-bs-dismiss="modal" aria-label="Close">
<i class="ri-close-large-line fw-semibold"></i>
</button>
</div>
<div class="modal-body">
<p class="mb-2 fw-semibold">This modal is designed to be <span class="highlight">fullscreen below 992px</span>.</p>
<p class="m-0">Useful for tablets and larger mobile devices.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<div class="modal zoom-in" id="exampleModalFullscreenXl" tabindex="-1" aria-labelledby="exampleModalFullscreenXlLabel" aria-hidden="true">
<div class="modal-dialog modal-fullscreen-xl-down">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalFullscreenXlLabel">Fullscreen below xl</h5>
<button type="button" class="btn-close icon-btn-sm" data-bs-dismiss="modal" aria-label="Close">
<i class="ri-close-large-line fw-semibold"></i>
</button>
</div>
<div class="modal-body">
<p class="mb-2 fw-semibold">This modal will be <span class="highlight">fullscreen below 1200px</span>.</p>
<p class="m-0">Great for larger screens to maintain a focused view.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<div class="modal zoom-in" id="exampleModalFullscreenXxl" tabindex="-1" aria-labelledby="exampleModalFullscreenXxlLabel" aria-hidden="true">
<div class="modal-dialog modal-fullscreen-xxl-down">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalFullscreenXxlLabel">Fullscreen below xxl</h5>
<button type="button" class="btn-close icon-btn-sm" data-bs-dismiss="modal" aria-label="Close">
<i class="ri-close-large-line fw-semibold"></i>
</button>
</div>
<div class="modal-body">
<p class="mb-2 fw-semibold">This modal is set to be <span class="highlight">fullscreen below 1400px</span>.</p>
<p class="m-0">It's ideal for a clean and uninterrupted display of content.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>مودال قابل کشیدن
با افزودن عبارت بوت تیرپ مودال قابل کشیدن ایجاد کنید data-draggable="true" نسبت دادن به <div class="modal"> عنصر این به کاربران اجازه میدهد تا مودال را در اطراف صفحه نمایش حرکت دهند.
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#dragModal">
Launch Scrollable modal
</button>
<div class="modal zoom-in" id="dragModal" data-draggable="true" data-bs-keyboard="false" tabindex="-1" aria-labelledby="dragModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="dragModalLabel">Modal title</h5>
<button type="button" class="btn-close icon-btn-sm" data-bs-dismiss="modal" aria-label="Close">
<i class="ri-close-large-line fw-semibold"></i>
</button>
</div>
<div class="modal-body" id="draggableContent">
<p>This content should appear at the bottom after you scroll.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div><!--End modal-->مودال متحرک
یک انیمیشن را از منوی بازشو انتخاب کنید و کلیک کنید نمایش مودال برای دیدن حالت Bootstrap باز شده با جلوه متحرک صاف.