::eBazar:: Ui Modal

چگونه کار می کند

قبل از شروع کار با مؤلفه مدال بوت استرپ، حتماً موارد زیر را بخوانید زیرا گزینه های منو اخیراً تغییر کرده اند.

مودال برای اجزای بوت استرپ بیشتر مستندات بوت استرپ مدال

مدال ها با HTML، CSS و جاوا اسکریپت ساخته می شوند. آنها روی هر چیز دیگری در سند قرار می گیرند و اسکرول را از آن حذف می کنند <body> به طوری که محتوای مودال به جای آن اسکرول می شود.
با کلیک بر روی "پس زمینه" مدال به طور خودکار مودال بسته می شود.
بوت استرپ هر بار فقط از یک پنجره مودال پشتیبانی می کند. مدال‌های تودرتو پشتیبانی نمی‌شوند، زیرا ما معتقدیم تجربه‌های کاربری ضعیفی دارند.
مدال ها استفاده می کنند position: fixed، که گاهی اوقات می تواند در مورد رندر آن کمی خاص باشد. در صورت امکان، HTML مدال خود را در یک موقعیت سطح بالا قرار دهید تا از تداخل احتمالی عناصر دیگر جلوگیری شود. احتمالاً هنگام تودرتو کردن a با مشکلاتی مواجه خواهید شد .modal در یک عنصر ثابت دیگر.
بار دیگر به دلیل position: fixedاخطارهایی در مورد استفاده از مدال در دستگاه های تلفن همراه وجود دارد. به اسناد پشتیبانی مرورگر ما مراجعه کنید برای جزئیات.
با توجه به اینکه HTML5 چگونه معنایی خود را تعریف می کند، autofocus ویژگی HTML هیچ تاثیری در مدال های بوت استرپ ندارد. برای رسیدن به همان اثر، از جاوا اسکریپت سفارشی استفاده کنید:

var myModal = document.getElementById('myModal')
    var myInput = document.getElementById('myInput')

    myModal.addEventListener('shown.bs.modal', function () {
        myInput.focus()
    })

در زیر یک است static مثال مودال (به معنای آن position و display نادیده گرفته شده اند). شامل سرصفحه مدال، بدنه معین (الزامی برای padding)، و پاورقی معین (اختیاری). از شما می‌خواهیم هر زمان که امکان دارد، سرصفحه‌های معین را با اقدامات رد کنید یا یک اقدام رد صریح دیگر ارائه کنید..

پیش نمایش
HTML

    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalLive">Launch demo modal</button>

    <!-- Modal -->
    <div class="modal fade" id="exampleModalLive" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLiveLabel">Modal title</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>Woohoo, you're reading this text in a modal!</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>

پس زمینه ایستا

وقتی پس‌زمینه روی استاتیک تنظیم می‌شود، مودال هنگام کلیک کردن در خارج از آن بسته نمی‌شود. روی دکمه زیر کلیک کنید تا آن را امتحان کنید.

پیش نمایش
HTML

    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdropLive">Launch static backdrop modal</button>

    <!-- Modal -->
    <div class="modal fade" id="staticBackdropLive" data-backdrop="static" data-keyboard="false" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="staticBackdropLiveLabel">Modal title</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>I will not close if you click outside me. Don't even try to press escape key.</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">Understood</button>
                </div>
            </div>
        </div>
    </div>

عمودی در مرکز

افزودن .modal-dialog-centered به .modal-dialog به مرکز عمودی مدال.

پیش نمایش
HTML

    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalCenter">Vertically centered modal</button>
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalCenteredScrollable">Vertically centered scrollable modal</button>

    <!-- Modal Modal Center-->
    <div class="modal fade" id="exampleModalCenter" tabindex="-1" aria-labelledby="exampleModalCenterTitle" style="display: none;" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    ...
                </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>

    <!-- Modal Modal Centered Scrollable-->
    <div class="modal fade" id="exampleModalCenteredScrollable" tabindex="-1" aria-labelledby="exampleModalCenteredScrollableTitle" style="display: none;" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalCenteredScrollableTitle">Modal title</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    ...
                </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>

اندازه های اختیاری

مدال‌ها دارای سه اندازه اختیاری هستند که از طریق کلاس‌های اصلاح‌کننده در دسترس هستند تا روی یک قرار بگیرند .modal-dialog. این اندازه‌ها در نقاط شکست مشخصی ایجاد می‌شوند تا از نوارهای اسکرول افقی در نماهای باریک‌تر جلوگیری کنند.

اندازه	کلاس	Modal max-width
کوچک	`.modal-sm`	`300px`
پیش فرض	هیچ	`500px`
بزرگ	`.modal-lg`	`800px`
فوق العاده بزرگ	`.modal-xl`	`1140px`
تمام صفحه	`.modal-fullscreen`	`Always`

پیش نمایش
HTML

    <!-- Button trigger modal -->
    <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="#exampleModalXl">Extra large modal</button>
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalLg">Large modal</button>
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModalSm">Small modal</button>

    <!-- Modal Fullscreen -->
    <div class="modal fade" id="exampleModalFullscreen" tabindex="-1" aria-labelledby="exampleModalFullscreenLabel" aria-hidden="true" style="display: none;">
        <div class="modal-dialog modal-fullscreen">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title h4" id="exampleModalFullscreenLabel">Full screen modal</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal XL -->
    <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">
                <h5 class="modal-title h4" id="exampleModalXlLabel">Extra large modal</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                ...
                </div>
            </div>
        </div>
    </div>

    <!-- Modal LG -->
    <div class="modal fade" id="exampleModalLg" tabindex="-1" aria-labelledby="exampleModalLgLabel" aria-hidden="true" style="display: none;">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title h4" id="exampleModalLgLabel">Large modal</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    ...
                </div>
            </div>
        </div>
    </div>

    <!-- Modal SM -->
    <div class="modal fade" id="exampleModalSm" tabindex="-1" aria-labelledby="exampleModalSmLabel" aria-hidden="true" style="display: none;">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title h4" id="exampleModalSmLabel">Small modal</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    ...
                </div>
            </div>
        </div>
    </div>

تنظیمات رنگ قالب

برای تنظیمات پویا کلیک کنید

رنگ اصلی
رنگ ثانویه
رنگ نمودار 1
رنگ نمودار 2
رنگ نمودار 3
رنگ نمودار 4
رنگ نمودار 5

تنظیمات فونت

فونت گوگل پاپینس
فونت گوگل اوپن سانس
فونت گوگل مونت
فونت گوگل موتکا

چیدمان کنتراست

فعال کردن حالت تاریک!
فعال کردن کنتراست بالا
فعال کردن حالت چپ چین!

چگونه کار می کند

اجزای مدال

عنوان مدال

پس زمینه ایستا

عنوان مدال

عمودی در مرکز

اندازه های اختیاری