مودال و بستن‌ها

<button type="button" class="btn btn-primary" data-bs-toggle="modal"
    data-bs-target="#exampleModal">
    راه‌اندازی مودال دمو
</button>
<div class="modal fade" id="exampleModal" tabindex="-1"
    aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="exampleModalLabel1">عنوان مودال</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"
                    aria-label="بستن"></button>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary"
                    data-bs-dismiss="modal">بستن</button>
                <button type="button" class="btn btn-primary">ذخیره تغییرات</button>
            </div>
        </div>
    </div>
</div>

<button type="button" class="btn btn-primary" data-bs-toggle="modal"
    data-bs-target="#staticBackdrop">
    راه‌اندازی مودال با پس‌زمینه ثابت
</button>
<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">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="staticBackdropLabel">عنوان مودال
                </h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"
                    aria-label="بستن"></button>
            </div>
            <div class="modal-body">
                <p>من بسته نخواهم شد اگر بیرون از من کلیک کنید. حتی سعی نکنید که کلید Escape را فشار دهید.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary"
                    data-bs-dismiss="modal">بستن</button>
                <button type="button" class="btn btn-primary">فهمیدم</button>
            </div>
        </div>
    </div>
</div>

<button type="button" class="btn btn-primary" data-bs-toggle="modal"
    data-bs-target="#exampleModalScrollable">
    اسکرول محتوای طولانی
</button>
<div class="modal fade" id="exampleModalScrollable" tabindex="-1"
    aria-labelledby="exampleModalScrollable" data-bs-keyboard="false"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="staticBackdropLabel1">عنوان مودال
                </h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"
                    aria-label="بستن"></button>
            </div>
            <div class="modal-body">
                <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد</p>
                <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.</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>
                <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary"
                    data-bs-dismiss="modal">بستن</button>
                <button type="button" class="btn btn-primary">ذخیره
                    تغییرات</button>
            </div>
        </div>
    </div>
</div>

<button type="button" class="btn btn-primary" data-bs-toggle="modal"
    data-bs-target="#exampleModalScrollable2">
    مودال عمودی مرکزی
    </button>
    <div class="modal fade" id="exampleModalScrollable2" tabindex="-1"
    aria-labelledby="exampleModalScrollable2" data-bs-keyboard="false"
    aria-hidden="true">
    <!-- مودال قابل اسکرول -->
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="staticBackdropLabel2">عنوان مودال</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"
                    aria-label="بستن"></button>
            </div>
            <div class="modal-body">
                <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary"
                    data-bs-dismiss="modal">بستن</button>
                <button type="button" class="btn btn-primary">ذخیره تغییرات</button>
            </div>
        </div>
    </div>
    </div>

<button type="button" class="btn btn-primary" data-bs-toggle="modal"
    data-bs-target="#exampleModalScrollable3">
    مودال عمودی با قابلیت اسکرول
</button>
<div class="modal fade" id="exampleModalScrollable3" tabindex="-1"
aria-labelledby="exampleModalScrollable3" data-bs-keyboard="false"
aria-hidden="true">
<!-- مودال قابل اسکرول -->
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
    <div class="modal-content">
        <div class="modal-header">
            <h6 class="modal-title" id="staticBackdropLabel3">عنوان مودال
            </h6>
            <button type="button" class="btn-close" data-bs-dismiss="modal"
                aria-label="Close"></button>
        </div>
        <div class="modal-body">
            <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است، و برای شرایط فعلی تکنولوژی مورد نیاز، و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد، کتابهای زیادی در شصت و سه درصد گذشته حال و آینده، شناخت فراوان جامعه و متخصصان را می طلبد، تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی، و فرهنگ پیشرو در زبان فارسی ایجاد کرد، در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها، و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی، و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.</p>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ</p>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary"
                data-bs-dismiss="modal">بستن</button>
            <button type="button" class="btn btn-primary">ذخیره تغییرات</button>
        </div>
    </div>
</div>
</div>

<button type="button" class="btn btn-primary" data-bs-toggle="modal"
    data-bs-target="#exampleModalScrollable4">
    اجرای مودال نمایشی
</button>
<div class="modal fade" id="exampleModalScrollable4" tabindex="-1"
aria-labelledby="exampleModalScrollable4" data-bs-keyboard="false"
aria-hidden="true">
<!-- مودال قابل پیمایش -->
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
    <div class="modal-content">
        <div class="modal-header">
            <h6 class="modal-title" id="staticBackdropLabel4">عنوان مودال
            </h6>
            <button type="button" class="btn-close" data-bs-dismiss="modal"
                aria-label="Close"></button>
        </div>
        <div class="modal-body">
            <h5>پاپ‌اوور در یک مودال</h5>
            <p>این <a href="javascript:void(0);" role="button" class="btn btn-secondary"
                    data-bs-toggle="popover" title="عنوان پاپ‌اوور"
                    data-bs-content="محتوای پاپ‌اوور در این ویژگی تنظیم شده است.">دکمه</a>
                یک پاپ‌اوور را با کلیک فعال می‌کند.</p>
            <hr>
            <h5>تیپ‌های ابزار در یک مودال</h5>
            <p><a href="javascript:void(0);" class="text-primary" data-bs-toggle="tooltip" title="تیپ‌ ابزار">این
                    لینک</a> و <a href="javascript:void(0);" class="text-primary" data-bs-toggle="tooltip"
                    title="تیپ‌ ابزار">آن لینک</a> تیپ‌های ابزار در هنگام هاور دارند.
            </p>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary"
                data-bs-dismiss="modal">بستن</button>
            <button type="button" class="btn btn-primary">ذخیره تغییرات</button>
        </div>
    </div>
</div>
</div>

<button type="button" class="btn btn-primary" data-bs-toggle="modal"
    data-bs-target="#exampleModalScrollable5">
    راه‌اندازی مودال نمایشی
</button>
<div class="modal fade" id="exampleModalScrollable5" tabindex="-1"
aria-labelledby="exampleModalScrollable5" data-bs-keyboard="false"
aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h6 class="modal-title" id="staticBackdropLabel5">عنوان مودال
                </h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"
                    aria-label="بستن">
                </button>
            </div>
            <div class="modal-body">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-md-4 bg-light border">.col-md-4</div>
                        <div class="col-md-4 ms-auto bg-light border">.col-md-4
                            .ms-auto</div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-md-3 ms-auto bg-light border">.col-md-3
                            .ms-auto</div>
                        <div class="col-md-2 ms-auto bg-light border">.col-md-2
                            .ms-auto</div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-md-6 ms-auto bg-light border">.col-md-6
                            .ms-auto</div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-sm-9 bg-light border">
                            سطح 1: .col-sm-9
                            <div class="row">
                                <div class="col-8 col-sm-6 bg-light border">
                                    سطح 2: .col-8 .col-sm-6
                                </div>
                                <div class="col-4 col-sm-6 bg-light border">
                                    سطح 2: .col-4 .col-sm-6
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary"
                    data-bs-dismiss="modal">بستن</button>
                <button type="button" class="btn btn-primary">ذخیره تغییرات</button>
            </div>
        </div>
    </div>
</div>

<a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle"
    role="button">باز کردن مودال اول
</a>
<div class="modal fade" id="exampleModalToggle"
aria-labelledby="exampleModalToggleLabel" tabindex="-1" aria-hidden="true"
style="display: none;">
<div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
        <div class="modal-header">
            <h6 class="modal-title" id="exampleModalToggleLabel">مودال 1
            </h6>
            <button type="button" class="btn-close" data-bs-dismiss="modal"
                aria-label="بستن"></button>
        </div>
        <div class="modal-body">
            با استفاده از دکمه زیر مودال دوم را نشان داده و این مودال را مخفی کنید.
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary"
                data-bs-target="#exampleModalToggle2"
                data-bs-toggle="modal">باز کردن مودال دوم</button>
        </div>
    </div>
</div>
</div>
<div class="modal fade" id="exampleModalToggle2"
aria-labelledby="exampleModalToggleLabel2" tabindex="-1" aria-hidden="true"
style="display: none;">
<div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
        <div class="modal-header">
            <h6 class="modal-title" id="exampleModalToggleLabel2">مودال 2
            </h6>
            <button type="button" class="btn-close" data-bs-dismiss="modal"
                aria-label="بستن"></button>
        </div>
        <div class="modal-body">
            این مودال را مخفی کرده و مودال اول را با استفاده از دکمه زیر نمایش دهید.
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" data-bs-target="#exampleModalToggle"
                data-bs-toggle="modal">بازگشت به اولی</button>
        </div>
    </div>
</div>
</div>

<button type="button" class="btn btn-primary mb-sm-0 mb-1" data-bs-toggle="modal"
    data-bs-target="#exampleModalXl">مودال خیلی بزرگ</button>
<button type="button" class="btn btn-secondary mb-sm-0 mb-1" data-bs-toggle="modal"
data-bs-target="#exampleModalLg">مودال بزرگ</button>
<button type="button" class="btn btn-warning" data-bs-toggle="modal"
data-bs-target="#exampleModalSm">مودال کوچک</button>
<div class="modal fade" id="exampleModalXl" tabindex="-1"
aria-labelledby="exampleModalXlLabel" style="display: none;" aria-hidden="true">
<div class="modal-dialog modal-xl">
    <div class="modal-content">
        <div class="modal-header">
            <h6 class="modal-title" id="exampleModalXlLabel">مودال خیلی بزرگ
                </h6>
            <button type="button" class="btn-close" data-bs-dismiss="modal"
                aria-label="بستن"></button>
        </div>
        <div class="modal-body">
            ...
        </div>
    </div>
</div>
</div>
<div class="modal fade" id="exampleModalLg" tabindex="-1"
aria-labelledby="exampleModalLgLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-header">
            <h6 class="modal-title" id="exampleModalLgLabel">مودال بزرگ
            </h6>
            <button type="button" class="btn-close" data-bs-dismiss="modal"
                aria-label="بستن"></button>
        </div>
        <div class="modal-body">
            ...
        </div>
    </div>
</div>
</div>
<div class="modal fade" id="exampleModalSm" tabindex="-1"
aria-labelledby="exampleModalSmLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
    <div class="modal-content">
        <div class="modal-header">
            <h6 class="modal-title" id="exampleModalSmLabel">مودال کوچک
            </h6>
            <button type="button" class="btn-close" data-bs-dismiss="modal"
                aria-label="بستن"></button>
        </div>
        <div class="modal-body">
            ...
        </div>
    </div>
</div>
</div>