مودال‌ Bootstrap یا Modal

مودال‌ در Bootstrap یک کامپوننت قدرتمند و چندمنظوره برای ایجاد پنجره‌های محاوره‌ای (Dialog) تعاملی هستند که به‌صورت موقتی جریان کاری کاربر را متوقف می‌کنند تا اطلاعات مهمی را نمایش دهند، ورودی دریافت کنند یا هشدار بدهند. آن‌ها را می‌توان به‌عنوان صحنه‌های موقتی در نظر گرفت که بر روی محتوای اصلی قرار می‌گیرند و توجه کاربر را جلب می‌کنند تا پیش از بازگشت به رابط اصلی، عملی انجام دهند.

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

ساختار پایه یک مودال در Bootstrap از چند عنصر کلیدی HTML تشکیل شده است:

.modal: کانتینر اصلی مودال. باید دارای یک شناسه یکتا (id) برای هدف‌گیری، ویژگی tabindex="-1" برای دسترسی‌پذیری و ویژگی aria-labelledby برای اشاره به عنوان مودال باشد.
.modal-dialog: برای تعیین موقعیت و اندازه مودال. می‌توان کلاس‌هایی مانند .modal-dialog-centered برای مرکز‌چین عمودی و .modal-dialog-scrollable برای اسکرول‌پذیر کردن محتوا به آن افزود.
.modal-content: محتوای اصلی مودال (هدر، بدنه، فوتر).
.modal-header: معمولاً شامل عنوان مودال (.modal-title) و دکمه بستن است.
.modal-body: بخش اصلی محتوا، جایی که متن، فرم یا سایر المان‌ها قرار می‌گیرند.
.modal-footer: معمولاً شامل دکمه‌های اقدام (مثل «ذخیره»، «لغو»، «بستن») است.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic Bootstrap Modal</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-4">
        <h2>Basic Modal</h2>
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
            Launch demo modal
        </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">
                        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        This is the content of the basic Bootstrap modal. You can place any HTML here.
                    </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>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

ویژگی‌های کلیدی

.modal.fade: اضافه کردن افکت انتقال محو هنگام باز و بسته شدن مودال.
data-bs-toggle="modal": مشخص می‌کند که عنصر باید مودال را باز کند.
data-bs-target="#yourModalId": مشخص می‌کند کدام مودال نمایش داده شود.
data-bs-dismiss="modal": عنصر را برای بستن مودال تعیین می‌کند (مانند دکمه بستن).
aria-labelledby="yourModalTitleId": برای ارجاع به عنوان مودال در جهت دسترسی‌پذیری.
aria-hidden="true": نشان می‌دهد که مودال فعلاً برای تکنولوژی‌های کمکی پنهان است.

اندازه‌های مودال‌ها

Bootstrap کلاس‌های اصلاح‌کننده زیر را برای کنترل اندازه مودال ارائه می‌دهد:

.modal-sm: مودال کوچک
.modal-lg: مودال بزرگ
.modal-xl: مودال خیلی بزرگ (اکسترا لارج)

<div class="modal fade" id="smallModal" tabindex="-1" aria-labelledby="smallModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-body">
                Small modal content.
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="largeModal" tabindex="-1" aria-labelledby="largeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-body">
                Large modal content.
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="xlModal" tabindex="-1" aria-labelledby="xlModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-body">
                Extra-large modal content.
            </div>
        </div>
    </div>
</div>

مرکز‌چین و اسکرول‌پذیر کردن مودال‌ها

.modal-dialog-centered: برای مرکز‌چین عمودی مودال.
.modal-dialog-scrollable: محتوای مودال در صورت زیاد بودن ارتفاع، اسکرول‌پذیر می‌شود.
.modal-body-scrollable: فقط بخش body مودال را اسکرول‌پذیر می‌کند.

<div class="modal fade" id="centeredModal" tabindex="-1" aria-labelledby="centeredModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-body">
                Centered modal content.
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="scrollableModal" tabindex="-1" aria-labelledby="scrollableModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="scrollableModalLabel">Scrollable Modal</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>...</p>
                <p>...</p>
                <p>...</p>
                <p>...</p>
                <p>...</p>
                <p>...</p>
                <p>...</p>
                <p>...</p>
                <p>...</p>
                <p>...</p>
                <p>...</p>
                <p>...</p>
                <p>...</p>
                <p>...</p>
                <p>...</p>
                <p>...</p>
                <p>...</p>
                <p>...</p>
                <p>...</p>
                <p>...</p>
                <p>...</p>
                <p>...</p>
                <p>...</p>
                <p>...</p>
                <p>...</p>
                <p>...</p>
                <p>...</p>
                <p>...</p>
                <p>...</p>
                <p>...</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>

کنترل پس‌زمینه (data-bs-backdrop)

ویژگی data-bs-backdrop رفتار پس‌زمینه مودال را کنترل می‌کند:

true (پیش‌فرض): پس‌زمینه خاکستری نمایش داده می‌شود. کلیک خارج از مودال، آن را می‌بندد.
false: هیچ پس‌زمینه‌ای وجود ندارد. کلیک بیرون از مودال، باعث بسته شدن آن نمی‌شود.
static: پس‌زمینه خاکستری نمایش داده می‌شود اما کلیک بیرونی باعث بسته شدن آن نمی‌شود؛ فقط با دکمه‌ها بسته می‌شود.

<div class="modal fade" id="noBackdropModal" tabindex="-1" aria-labelledby="noBackdropModalLabel" aria-hidden="true" data-bs-backdrop="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                Modal with no backdrop. Click outside to see it doesn't close.
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="staticBackdropModal" 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">
                <h5 class="modal-title" id="staticBackdropLabel">Static backdrop</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                I will not close if you click outside me. But you can use the button above.
            </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>

جلوگیری از بستن با کلید Escape

با استفاده از ویژگی data-bs-keyboard="false" در کنار data-bs-backdrop="static"، کاربر نمی‌تواند با فشردن کلید Escape مودال را ببندد.

رویدادها و API جاوااسکریپت

مودال‌های Bootstrap دارای رویدادها و متدهای متنوعی هستند:

رویدادها

show.bs.modal: هنگام شروع نمایش.
shown.bs.modal: پس از نمایش کامل مودال.
hide.bs.modal: هنگام شروع بسته شدن.
hidden.bs.modal: پس از بسته شدن کامل.
hidePrevented.bs.modal: هنگامی که بسته شدن مودال جلوگیری شود (مثلاً در حالت static).

نمونه کد جاوااسکریپت:

const myModal = document.getElementById('exampleModal');
myModal.addEventListener('show.bs.modal', () => {
    console.log('Modal is about to be shown.');
});

myModal.addEventListener('shown.bs.modal', () => {
    console.log('Modal is now fully visible.');
});

const staticBackdropModalEl = document.getElementById('staticBackdropModal');
staticBackdropModalEl.addEventListener('hidePrevented.bs.modal', event => {
  alert('You cannot close this modal by clicking outside!');
});

ملاحظات دسترسی‌پذیری

aria-labelledby: باید به شناسه عنوان مودال اشاره کند.
aria-modal="true": مشخص می‌کند عنصر، یک مودال است.
role="dialog": برای اعلام نقش مودال.
tabindex="-1": جلوگیری از فوکوس اولیه روی مودال.
دکمه بستن با aria-label: همیشه باید وجود داشته باشد.
مدیریت فوکوس: پس از باز شدن مودال، فوکوس باید روی اولین عنصر قابل تعامل قرار گیرد و پس از بستن، به عنصر اولیه بازگردد.
ناوبری با کیبورد: اطمینان از اینکه همه عناصر با Tab قابل دسترسی‌اند و Escape مودال را می‌بندد.

موارد استفاده خلاقانه

مودال‌ Bootstrap می‌تواند کاربردهای فراتری از نمایش هشدار ساده داشته باشد:

فرم‌های پیچیده: تقسیم فرم‌های طولانی به مراحل مختلف.
گالری تصاویر: نمایش نسخه بزرگ‌تر تصاویر.
پخش ویدیو: جاسازی پلیر و کنترل پخش.
گفت‌وگوهای تأیید: تأیید قبل از انجام عملیات.
نمای سریع (Quick View): نمایش اطلاعات بدون ترک صفحه اصلی.
فرم ورود/ثبت‌نام
اعلان‌های سفارشی و تعاملی

بهترین شیوه‌ها

استفاده با احتیاط: مودال‌ها جریان کاربر را متوقف می‌کنند؛ فقط برای اطلاعات مهم از آن‌ها استفاده کنید.
ارتباط شفاف: عنوان و محتوای مودال باید واضح و مشخص باشند.
دکمه‌های واضح: گزینه‌های اقدام باید قابل فهم و قابل دسترسی باشند.
احترام به کاربر: از نمایش مدام مودال خودداری کنید.
تست کامل: عملکرد و واکنش‌گرایی در مرورگرها و دستگاه‌های مختلف را بررسی کنید.
تضمین دسترسی‌پذیری: همیشه مودال‌ها را برای کاربران دارای ناتوانی قابل دسترسی طراحی کنید.

نتیجه‌گیری

مودال‌ Bootstrap ابزارهایی قدرتمند برای ایجاد تجربه‌های متمرکز، تعاملی و مؤثر در برنامه‌های وب هستند. با درک ساختار، قابلیت‌های سفارشی‌سازی و رعایت اصول دسترسی، می‌توانید اطلاعات مهم را منتقل کنید، داده از کاربر دریافت نمایید و تجربه کاربری را بدون اختلال در محتوای اصلی ارتقاء دهید.

از ظرفیت نمایشی مودال‌ها بهره ببرید و از آن‌ها به‌عنوان ابزار راهبری و تعامل با مخاطب استفاده نمایید.