مودال‌ها

کادرهای گفتگو برای نمایش لایت باکس، اعلان ها یا سایر محتوای سفارشی
مودال‌های بوت‌استرپ پیشفرض
مودال پایه:
<!-- Button trigger modal -->
<button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#exampleModal"></button>

<!-- Modal -->
<div class="modal fade" 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">مودال‌ بوت‌استرپ پیشفرض</h5>
                <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="بستن"></button>
            </div>
            <div class="modal-body">...</div>
            <div class="modal-footer"><button class="btn btn-secondary" type="button" data-bs-dismiss="modal">بستن</button><button class="btn btn-primary" type="button">ذخیره تغییرات</button></div>
        </div>
    </div>
</div>
//- Button trigger modal
button.btn.btn-primary(type='button', data-bs-toggle='modal', data-bs-target='#exampleModal')
    | مشاهده دمو
//- Modal
#exampleModal.modal.fade(tabindex='-1', role='dialog', aria-labelledby='exampleModalLabel', aria-hidden='true')
    .modal-dialog(role='document')
        .modal-content
            .modal-header
                h5#exampleModalLabel.modal-title مودال‌ بوت‌استرپ پیشفرض
                button.btn-close(type='button', data-bs-dismiss='modal', aria-label='بستن')
            .modal-body
                | ...
            .modal-footer
                button.btn.btn-secondary(type='button', data-bs-dismiss='modal') بستن
                button.btn.btn-primary(type='button') ذخیره تغییرات
حالت پیش‌فرض Bootstrap برای تم SB Admin Pro تغییر شکل داده شده است.
پس زمینه استاتیک:
<!-- Button trigger modal -->
<button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#staticBackdrop">مشاهده دمو</button>

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" tabindex="-1" role="dialog" 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">پس زمینه استاتیک</h5>
                <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="بستن"></button>
            </div>
            <div class="modal-body">...</div>
            <div class="modal-footer"><button class="btn btn-secondary" type="button" data-bs-dismiss="modal">بستن</button><button class="btn btn-primary" type="button">فهمیدم</button></div>
        </div>
    </div>
</div>
//- Button trigger modal
button.btn.btn-primary(type='button', data-bs-toggle='modal', data-bs-target='#staticBackdrop')
    | مشاهده دمو
//- Modal
#staticBackdrop.modal.fade(data-bs-backdrop='static', tabindex='-1', role='dialog', aria-labelledby='staticBackdropLabel', aria-hidden='true')
    .modal-dialog(role='document')
        .modal-content
            .modal-header
                h5#staticBackdropLabel.modal-title پس زمینه استاتیک
                button.btn-close(type='button', data-bs-dismiss='modal', aria-label='بستن')
            .modal-body
                | ...
            .modal-footer
                button.btn.btn-secondary(type='button', data-bs-dismiss='modal') بستن
                button.btn.btn-primary(type='button') فهمیدم
گزینه static backdrop modal را نمی توان با کلیک کردن در خارج از پنجره مودال رد کرد. در عوض، کاربر باید مودال را با استفاده از دکمه بستن در پنجره مودال رد کند.
مودال اسکرول شونده بوت استرپ
صفحه اسکرول طولانی معین:
<!-- Button trigger modal -->
<button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#exampleModalLong">مشاهده دمو</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">صفحه اسکرول طولانی معین</h5>
                <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="بستن"></button>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer"><button class="btn btn-secondary" type="button" data-bs-dismiss="modal">بستن</button><button class="btn btn-primary" type="button">ذخیره تغییرات</button></div>
        </div>
    </div>
</div>
//- Button trigger modal
button.btn.btn-primary(type='button', data-bs-toggle='modal', data-bs-target='#exampleModalLong')
    | مشاهده دمو
//- Modal
#exampleModalLong.modal.fade(tabindex='-1', role='dialog', aria-labelledby='exampleModalLongTitle', aria-hidden='true')
    .modal-dialog(role='document')
        .modal-content
            .modal-header
                h5#exampleModalLongTitle.modal-title صفحه اسکرول طولانی معین
                button.btn-close(type='button', data-bs-dismiss='modal', aria-label='بستن')
            .modal-body
                | ...
            .modal-footer
                button.btn.btn-secondary(type='button', data-bs-dismiss='modal') بستن
                button.btn.btn-primary(type='button') ذخیره تغییرات
به‌طور پیش‌فرض، اگر محتوا بیش از حد طولانی باشد، محتوای یک مدال مستقل از صفحه حرکت می‌کند. اگر نمی خواهید صفحه اسکرول شود، از گزینه بعدی استفاده کنید.
مودال ثابت با محتوای اسکرول شونده:
<!-- Button modal trigger -->
<button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#exampleModalScrollable">مشاهده دمو</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" 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="exampleModalScrollableTitle">عنوان مودال</h5>
                <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="بستن"></button>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer"><button class="btn btn-secondary" type="button" data-bs-dismiss="modal">بستن</button><button class="btn btn-primary" type="button">ذخیره تغییرات</button></div>
        </div>
    </div>
</div>
//- Button trigger modal
button.btn.btn-primary(type='button', data-bs-toggle='modal', data-bs-target='#exampleModalScrollable')
    | مشاهده دمو
//- Modal
#exampleModalScrollable.modal.fade(tabindex='-1', role='dialog', aria-labelledby='exampleModalScrollableTitle', aria-hidden='true')
    .modal-dialog.modal-dialog-scrollable(role='document')
        .modal-content
            .modal-header
                h5#exampleModalScrollableTitle.modal-title عنوان مودال
                button.btn-close(type='button', data-bs-dismiss='modal', aria-label='بستن')
            .modal-body
                | ...
            .modal-footer
                button.btn.btn-secondary(type='button', data-bs-dismiss='modal') بستن
                button.btn.btn-primary(type='button') ذخیره تغییرات
کلاس .modal-dialog-scrollable به .modal-dialog اضافه کنید، اگر محتوا طولانی تر از ارتفاع درگاه دید باشد، محتوای مودال طولانی تر را در بدنه مدال اسکرول کنید.
مودال بوت استرپ در مرکز عمودی
<!-- Button trigger modal -->
<button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#exampleModalCenter">مشاهده دمو</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" 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="exampleModalCenterTitle">مودال بوت استرپ در مرکز عمودی</h5>
                <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="بستن"></button>
            </div>
            <div class="modal-body">...</div>
            <div class="modal-footer"><button class="btn btn-secondary" type="button" data-bs-dismiss="modal">بستن</button><button class="btn btn-primary" type="button">ذخیره تغییرات</button></div>
        </div>
    </div>
</div>
//- Button trigger modal
button.btn.btn-primary(type='button', data-bs-toggle='modal', data-bs-target='#exampleModalCenter')
    | مشاهده دمو
//- Modal
#exampleModalCenter.modal.fade(tabindex='-1', role='dialog', aria-labelledby='exampleModalCenterTitle', aria-hidden='true')
    .modal-dialog.modal-dialog-centered(role='document')
        .modal-content
            .modal-header
                h5#exampleModalCenterTitle.modal-title مودال بوت استرپ در مرکز عمودی
                button.btn-close(type='button', data-bs-dismiss='modal', aria-label='بستن')
            .modal-body
                | ...
            .modal-footer
                button.btn.btn-secondary(type='button', data-bs-dismiss='modal') بستن
                button.btn.btn-primary(type='button') بستن
کلاس .modal-dialog-centered به .modal-dialog اضافه کنید. برای قرار گرفتن مودال بصورت عمودی هنگامی که پنجره مودال ظاهر می شود.
اندازه های مودال
<!-- Extra large modal -->
<button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#exampleModalXl">Extra Large</button>
<div class="modal fade" id="exampleModalXl" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" style="display: none;" aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">مودال خیلی بزرگ</h5>
                <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="بستن"></button>
            </div>
            <div class="modal-body">
                <p>این یک نمونه از مودال فوق العاده بزرگ است!</p>
            </div>
            <div class="modal-footer"><button class="btn btn-primary" type="button" data-bs-dismiss="modal">بستن</button></div>
        </div>
    </div>
</div>

<!-- Large modal -->
<button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#exampleModalLg">Large</button>
<div class="modal fade" id="exampleModalLg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">مودال بزرگ</h5>
                <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="بستن"></button>
            </div>
            <div class="modal-body">
                <p>این یک نمونه از مودال بزرگ است!</p>
            </div>
            <div class="modal-footer"><button class="btn btn-primary" type="button" data-bs-dismiss="modal">بستن</button></div>
        </div>
    </div>
</div>

<!-- Small modal -->
<button class="btn btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#exampleModalSm">Small</button>
<div class="modal fade" id="exampleModalSm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">مودال کوچک</h5>
                <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="بستن"></button>
            </div>
            <div class="modal-body">
                <p>این یک نمونه از مودال کوچک است!</p>
            </div>
            <div class="modal-footer"><button class="btn btn-primary" type="button" data-bs-dismiss="modal">بستن</button></div>
        </div>
    </div>
</div>
//- Extra large modal
button.btn.btn-primary(type='button', data-bs-toggle='modal', data-bs-target='#exampleModalXl') Extra Large
.modal.fade#exampleModalXl(tabindex='-1', role='dialog', aria-labelledby='myExtraLargeModalLabel', aria-hidden='true')
    .modal-dialog.modal-xl(role='document')
        .modal-content
            .modal-header
                h5.modal-title مودال خیلی بزرگ
                button.btn-close(type='button', data-bs-dismiss='modal', aria-label='بستن')
            .modal-body
                p این یک نمونه از مودال فوق العاده بزرگ است!
            .modal-footer
                button.btn.btn-primary(type='button', data-bs-dismiss='modal') بستن
//- Large modal
button.btn.btn-primary(type='button', data-bs-toggle='modal', data-bs-target='#exampleModalLg') Large
.modal.fade#exampleModalLg(tabindex='-1', role='dialog', aria-labelledby='myLargeModalLabel', aria-hidden='true')
    .modal-dialog.modal-lg(role='document')
        .modal-content
            .modal-header
                h5.modal-title مودال بزرگ
                button.btn-close(type='button', data-bs-dismiss='modal', aria-label='بستن')
            .modal-body
                p این یک نمونه از مودال بزرگ است!
            .modal-footer
                button.btn.btn-primary(type='button', data-bs-dismiss='modal') بستن
//- Small modal
button.btn.btn-primary(type='button', data-bs-toggle='modal', data-bs-target='#exampleModalSm') Small
.modal.fade#exampleModalSm(tabindex='-1', role='dialog', aria-labelledby='mySmallModalLabel', aria-hidden='true')
    .modal-dialog.modal-sm(role='document')
        .modal-content
            .modal-header
                h5.modal-title مودال کوچک
                button.btn-close(type='button', data-bs-dismiss='modal', aria-label='بستن')
            .modal-body
                p این یک نمونه از مودال کوچک است!
            .modal-footer
                button.btn.btn-primary(type='button', data-bs-dismiss='modal') بستن
کلاس .modal-xl , .modal-lg , یا .modal-sm به کلاس .modal-dialog برای تنظیم اندازه مدال های مختلف، اضافه کنید.
مستندات بوت استرپ موجود است

مودال‌ها یک کامپوننت پیش‌فرض است که در فریمورک بوت استرپ گنجانده شده است. برای کسب اطلاعات بیشتر در مورد پیاده سازی، اصلاح و گسترش استفاده از مدال ها در پروژه خود، از صفحه مستندات مدال رسمی بوت استرپ دیدن کنید.

از Bootstrap Modal Docs دیدن کنید