مدال پایه
پاراگراف اول را بررسی کنید
کیک جو دوسر بستنی شیرینی کیک شکلاتی کیک شکلاتی کیک پنبه دراژه پای سیب.
کیک شیرینی زنجبیلی بیسکویت رول دونات.
چند متن بیشتر
ژله کیک میوه ای شکلاتی تارت دسر آلو شکری کاپ کیک.
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger">Save</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
حالت پیش فرض
با کلیک بر روی دکمه بالا، یک مدال را از طریق جاوا اسکریپت تغییر دهید.
پیمایش مطالب طولانی
هنگامی که مدال ها برای نمای کاربر یا دستگاه بسیار طولانی می شوند، مستقل از خود صفحه پیمایش می کنند.
عمودی در مرکز
اضافه کردن.modal-dialog-centered to .modal-dialog to vertically center the modal.
با استفاده از شبکه
از سیستم شبکه Bootstrap در یک مودال با تودرتو استفاده کنید.container-fluid within the .modal-body.
غیرفعال کردن انیمیشن
برای حالت‌هایی که به‌جای محو شدن برای مشاهده ظاهر می‌شوند، کلاس .fade را از نشانه‌گذاری مدال خود حذف کنید.
Modal با راهنمای ابزار و پاپاور
راهنمای ابزار و پاپاورها را می توان در صورت نیاز در مدال قرار داد.
معین با آیکون ها
با چند آیکون و هشدار موفقیت برای دادن پیام موفقیت.
غیرفعال کردن صفحه کلید
به صورت پیش‌فرض، با فشار دادن کلید escape، مودال را می‌بندد.
غیرفعال کردن پس زمینه
غیرفعال کردن عنصر پس زمینه با استفاده از data-backdrop\u003dfalse، شامل یک عنصر پس زمینه modal است.
نمایش مدال
به صورت دستی یک مودال را باز می کند.
الگوی مودال اولیه
برای استفاده از طرح زمینه اصلی، اضافه کنید.bg-primary class to the .modal-header container
الگوی موفقیت آمیز
برای استفاده از طرح زمینه موفقیت آمیز، اضافه کنید.bg-success class to the .modal-header container
الگوی مدال خطر
برای استفاده از طرح زمینه خطر، اضافه کنید.bg-danger class to the .modal-header container
الگوی مدال اطلاعات
برای استفاده از طرح زمینه اطلاعاتی، اضافه کنید.bg-info class to the .modal-header container
الگوی مدال هشدار
برای استفاده از طرح زمینه هشدار دهنده، اضافه کنید.bg-warning class to the .modal-header container
الگوی مدال مرزی
برای استفاده از طرح زمینه رنگی Border، اضافه کنید.border-COLORNAME class to the .modal-content container
مدال فوق العاده بزرگ
کلاس اضافه کنید.modal-xl with .modal-dialog to use extra large size of modal.
مدال بزرگ
کلاس اضافه کنید.modal-lg with .modal-dialog to use large size of modal.
اندازه مدال پیش فرض
برایdefault size, modal markup doesn't require any additional sizing class.
اندازه مودال کوچک
کلاس اضافه کنید.modal-sm with .modal-dialog to use small size of modal.
اندازه مودال فوق العاده کوچک
کلاس اضافه کنید.modal-xs with .modal-dialog to use Extra Small size of modal.
کلاس مودال بوت استرپ چند رویداد را برای اتصال به عملکرد مودال نشان می دهد.
رویداد مودال OnShow
این رویداد بلافاصله با فراخوانی متد show instance فعال می شود.
رویداد مودال OnShown
این رویداد زمانی فعال می شود که مدال برای کاربر قابل مشاهده باشد (منتظر تکمیل انتقال CSS می شود).
OnHide Modal Event
این رویداد بلافاصله پس از فراخوانی متد hide instance فعال می شود.
OnHidden Modal Event
این رویداد زمانی فعال می شود که مودال از کاربر پنهان شود (منتظر تکمیل انتقال CSS می شود).
محتوای مودال متفاوت
دکمه‌هایی که همگی یک مدال را با محتویات کمی متفاوت راه‌اندازی می‌کنند. event.relatedTarget and HTML data-* attributes (possibly via jQuery) to vary the contents of the modal depending on which button was clicked.
در زیر یک نسخه آزمایشی زنده و به دنبال آن HTML و جاوا اسکریپت وجود دارد.
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever') // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)
})
<button type="button" class="btn btn-warning" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-warning" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-warning" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
<div class="modal fade text-left" id="exampleModal" 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">New message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">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-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
