بوت استرپ مودال مؤلفه ای با گزینه های گوناگون برای ارائه مؤلفه های منحصر به فرد مودال که مطابق با استانداردهای طراحی مترونیک است.
Below is a static modal example (meaning its position and display have been overridden).
<div class="modal position-relative d-block" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">مودال Title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="نزدیک">
<i aria-hidden="true" class="ki ki-close"></i>
</button>
</div>
<div class="modal-body">
<p>مودال body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">نزدیک</button>
<button type="button" class="btn btn-primary">ذخیره تغییرات</button>
</div>
</div>
</div>
</div>Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page.
<!-- دکمه trigger modal-->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleمودال">
راه اندازی مودال
</button>
<!-- مودال-->
<div class="modal fade" id="exampleمودال" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">مودال Title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="نزدیک">
<i aria-hidden="true" class="ki ki-close"></i>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light-primary font-weight-bold" data-dismiss="modal">نزدیک</button>
<button type="button" class="btn btn-primary font-weight-bold">ذخیره تغییرات</button>
</div>
</div>
</div>
</div>When backdrop is set to static, the modal will not close when clicking outside it. Click the button below to try it.
<!-- دکمه trigger modal-->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticبازگشتdrop">
راه اندازی مودال
</button>
<!-- مودال-->
<div class="modal fade" id="exampleمودال" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticبازگشتdrop" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">مودال Title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="نزدیک">
<i aria-hidden="true" class="ki ki-close"></i>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light-primary font-weight-bold" data-dismiss="modal">نزدیک</button>
<button type="button" class="btn btn-primary font-weight-bold">ذخیره تغییرات</button>
</div>
</div>
</div>
</div>
مودالs have three optional sizes, available via modifier classes to be placed on a .modal-dialog.
These sizes triggers on at certain breakpoints to avoid horizontal scrollbars on narrower viewports.
<div class="modal fade" id="exampleمودالSizeSm" tabindex="-1" role="dialog" aria-labelledby="exampleمودالSizeSm" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-sm" role="document">
...
</div>
</div>
<div class="modal fade" id="exampleمودالSizeLg" tabindex="-1" role="dialog" aria-labelledby="exampleمودالSizeLg" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
...
</div>
</div>
<div class="modal fade" id="exampleمودالSizeLg" tabindex="-1" role="dialog" aria-labelledby="exampleمودالSizeLg" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
...
</div>
</div>
<div class="modal fade" id="exampleمودالSizeSm" tabindex="-1" role="dialog" aria-labelledby="exampleمودالSizeSm" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-xl" role="document">
...
</div>
</div>When modals become too long for the user’s viewport or device, they scroll independently from the page itself. Try the demo below.
<!-- دکمه trigger modal-->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleمودالLong">
راه اندازی مودال
</button>
<!-- مودال-->
<div class="modal fade" id="exampleمودالLong" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticبازگشتdrop" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">مودال Title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="نزدیک">
<i aria-hidden="true" class="ki ki-close"></i>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light-primary font-weight-bold" data-dismiss="modal">نزدیک</button>
<button type="button" class="btn btn-primary font-weight-bold">ذخیره تغییرات</button>
</div>
</div>
</div>
</div>
ایجاد کردن a scrollable modal body by adding .modal-dialog-scrollable to .modal-dialog.
<!-- دکمه trigger modal-->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleمودالScrollable">
راه اندازی مودال
</button>
<!-- مودال-->
<div class="modal fade" id="exampleمودالScrollable" tabindex="-1" role="dialog" aria-labelledby="staticبازگشتdrop" 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="exampleModalLabel">مودال Title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="نزدیک">
<i aria-hidden="true" class="ki ki-close"></i>
</button>
</div>
<div class="modal-body" style="height: 300px;">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light-primary font-weight-bold" data-dismiss="modal">نزدیک</button>
<button type="button" class="btn btn-primary font-weight-bold">ذخیره تغییرات</button>
</div>
</div>
</div>
</div>
Add data-scroll="true" and data-height="300" attributes to .modal-body to use اسکرول بار based scrolling.
<!-- دکمه trigger modal-->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleمودالسفارشیScrollable">
راه اندازی مودال
</button>
<!-- مودال-->
<div class="modal fade" id="exampleمودالسفارشیScrollable" tabindex="-1" role="dialog" aria-labelledby="staticبازگشتdrop" 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="exampleModalLabel">مودال Title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="نزدیک">
<i aria-hidden="true" class="ki ki-close"></i>
</button>
</div>
<div class="modal-body">
<div data-scroll="true" data-height="300">
...
<div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light-primary font-weight-bold" data-dismiss="modal">نزدیک</button>
<button type="button" class="btn btn-primary font-weight-bold">ذخیره تغییرات</button>
</div>
</div>
</div>
</div>
Add .modal-dialog-centered to .modal-dialog to vertically center the modal.
<!-- دکمه trigger modal-->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleمودالمرکز">
راه اندازی مودال
</button>
<!-- مودال-->
<div class="modal fade" id="exampleمودالمرکز" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticبازگشتdrop" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
...
</div>
</div>
</div>Tooltips and popovers can be placed within modals as needed. When modals are closed, any tooltips and popovers within are also automatically dismissed.
<div class="modal-body">
<h5>Popover in a modal</h5>
<p>
This <a href="#" role="button" class="btn btn-secondary" data-toggle="popover" title="Popover title" data-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.
</p>
<hr>
<h5>Tooltips in a modal</h5>
<p>
<a href="#" title="Tooltip" data-toggle="tooltip">This link</a> and
<a href="#" title="Tooltip" data-toggle="tooltip">that link</a> have tooltips on hover.
</p>
</div>
