چگونه یک سیستم مودال (Modal) سبک و سریع بدون کتابخانه بسازیم؟

چرا باید مودال خودمان را بسازیم؟

توی دنیای امروز وب، سرعت و کارایی حرف اول رو می‌زنه. هر بایت کد اضافه، هر درخواست HTTP نا لازم، و هر خط جاوااسکریپت که بدون فکر اضافه شده باشه، می‌تونه تجربه کاربری رو خراب کنه و روی سئوی سایتت تأثیر منفی بذاره. شاید فکر کنی “خب یه کتابخونه کوچیک مودال که مشکلی نداره!” اما واقعیت اینه که همین “کوچیک‌ها” روی هم جمع میشن و یه بار اضافی بزرگ رو به دوش مرورگر کاربر میندازن.

مزایای رویکرد بدون کتابخانه

• سبکی و سرعت: مهمترین دلیل! مودال شما فقط شامل کدهاییه که واقعاً نیاز داری. این یعنی زمان بارگذاری کمتر و تجربه کاربری روان‌تر.
• کاهش وابستگی‌ها: خداحافظی با زنجیره وابستگی‌های npm و بروزرسانی‌های ناگهانی که ممکنه پروژه رو خراب کنن.
• کنترل کامل: هر جزئی از مودال، از ظاهر گرفته تا رفتارش، دقیقاً همونطوری عمل می‌کنه که تو می‌خوای. هیچ چیزی نیست که نتونی تقییرش بدی.
• بهینه‌سازی برای سئو و دسترس‌پذیری: می‌تونی مطمئن باشی که مودالت طبق بهترین استانداردهای دسترس‌پذیری (A11y) و سئو پیاده‌سازی شده، چون خودت کنترلش رو داری. (برای اطلاعات بیشتر در مورد بهینه‌سازی سایت، به صفحه اصلی fa-tools.ir سر بزن.)
• یادگیری عمیق‌تر: وقتی خودت یه کامپوننت رو از پایه می‌سازی، درک عمیق‌تری از نحوه کار وب پیدا می‌کنی که توی هر پروژه دیگه‌ای به کارت میاد.

چالش‌ها و راهکارها

البته که ساختن هر چیزی از پایه، چالش‌های خودش رو داره. ممکنه فکر کنی “واسه یه مودال ساده انقدر وقت بذارم؟” اما با دانش و تکنیک‌های درست، این کار نه تنها آسونه، بلکه لذت‌بخشه.

• پیچیدگی اولیه: ممکنه در ابتدا پیاده‌سازی جزئیات مثل قفل فوکوس (Focus Trap) یا بستن با کلید Esc کمی چالش‌برانگیز به نظر بیاد.
  
  راهکار: با تقسیم کار به مراحل کوچکتر و استفاده از کدهای آماده و اسنیپت‌های بهینه‌شده، این چالش‌ها قابل حلن. (می‌تونی از بخش کدهای آماده و اسنیپت ما کمک بگیری.)
• تست و دیباگ: اطمینان از عملکرد صحیح در همه مرورگرها و دستگاه‌ها.
  
  راهکار: از ابزارهای توسعه‌دهنده مرورگر و تست‌های دستی در دستگاه‌های مختلف استفاده کن.

آناتومی یک مودال: اجزای اصلی

قبل از اینکه بریم سراغ کد، بهتره بفهمیم که یک مودال از چه قسمت‌هایی تشکیل شده. این دیدگاه بهمون کمک می‌کنه تا ساختار رو بهتر طراحی کنیم.

ساختار HTML پایه

هر مودال حداقل به دو بخش اصلی نیاز داره: یکی برای پس‌زمینه تیره (overlay) و دیگری برای خود پنجره مودال که محتوا رو نمایش میده.

<!-- دکمه‌ای برای باز کردن مودال -->
<button id="openModalBtn">باز کردن مودال</button>

<!-- Modal Overlay -->
<div id="myModal" class="modal" role="dialog" aria-modal="true" aria-labelledby="modalTitle" style="display: none;">
    <!-- Modal Content -->
    <div class="modal-content">
        <div class="modal-header">
            <h2 id="modalTitle">عنوان مودال</h2>
            <button class="close-button" aria-label="بستن">&times;</button>
        </div>
        <div class="modal-body">
            <p>اینجا محتوای اصلی مودال قرار می‌گیرد. هر چیزی می‌تواند باشد؛ از فرم‌ها گرفته تا اطلاعات بیشتر.</p>
            <p>برای تست دسترس‌پذیری، مطمئن شوید که تمامی عناصر قابل دسترسی با کیبورد هستند.</p>
        </div>
        <div class="modal-footer">
            <button class="modal-action-btn">تایید</button>
            <button class="close-button secondary">لغو</button>
        </div>
    </div>
</div>

    💡 برای کپی کردن، کد را انتخاب کنید.

استایل‌دهی (CSS): از پایه تا پیشرفته

CSS همون بخشیه که به مودال شما جلوه بصری میده. باید مودال رو در ابتدا مخفی کنیم، یک پس‌زمینه تاریک (overlay) ایجاد کنیم و خود پنجره مودال رو به درستی در مرکز صفحه قرار بدیم.

.modal {
    display: none; /* در ابتدا مخفی */
    position: fixed; /* در بالای تمام محتوا */
    z-index: 1000; /* اطمینان از نمایش در بالای همه چیز */
    left: 0;
    top: 0;
    width: 100%; /* عرض کامل صفحه */
    height: 100%; /* ارتفاع کامل صفحه */
    overflow: auto; /* برای محتوای بلند */
    background-color: rgba(0,0,0,0.6); /* پس‌زمینه تاریک و شفاف */
    display: flex; /* برای مرکزیت‌دهی */
    align-items: center; /* مرکزیت عمودی */
    justify-content: center; /* مرکزیت افقی */
}

.modal-content {
    background-color: #fefefe;
    margin: auto; /* برای مرورگرهای قدیمی که flexbox رو ساپورت نمی‌کنند */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* عرض پیش‌فرض مودال */
    max-width: 600px; /* حداکثر عرض برای دسکتاپ */
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    position: relative;
    transform: translateY(-50px); /* برای انیمیشن باز شدن */
    opacity: 0; /* برای انیمیشن باز شدن */
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

.modal.show .modal-content {
    transform: translateY(0);
    opacity: 1;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.modal-header h2 {
    margin: 0;
    color: #333;
    font-size: 1.6em;
}

.close-button {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    border: none;
    background: none;
    padding: 0 10px;
    transition: color 0.3s ease;
}

.close-button:hover,
.close-button:focus {
    color: #333;
    text-decoration: none;
    outline: none;
}

.modal-body {
    padding: 10px 0;
    line-height: 1.6;
    color: #555;
}

.modal-footer {
    border-top: 1px solid #eee;
    padding-top: 15px;
    margin-top: 15px;
    text-align: right;
}

.modal-action-btn, .modal-footer .close-button.secondary {
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    margin-left: 10px;
}

.modal-action-btn {
    background-color: #3498db;
    color: white;
    border: none;
    transition: background-color 0.3s ease;
}

.modal-action-btn:hover {
    background-color: #2980b9;
}

.modal-footer .close-button.secondary {
    background-color: #f1f1f1;
    color: #555;
    border: 1px solid #ccc;
    font-weight: normal;
}

.modal-footer .close-button.secondary:hover {
    background-color: #e0e0e0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .modal-content {
        width: 95%; /* عرض بیشتر در موبایل */
        padding: 15px;
    }
    .modal-header h2 {
        font-size: 1.4em;
    }
    .modal-action-btn, .modal-footer .close-button.secondary {
        width: 100%;
        margin-top: 10px;
        margin-left: 0;
    }
    .modal-footer {
        text-align: center;
    }
}

    💡 برای کپی کردن، کد را انتخاب کنید.

منطق جاوااسکریپت: قلب تپنده مودال

جاوااسکریپت مسئولیت باز و بسته کردن مودال رو به عهده داره. همچنین وظیفه مهم‌تری مثل مدیریت دسترس‌پذیری، بستن با کلید Esc و جلوگیری از اسکرول شدن بدنه اصلی صفحه رو هم باید انجام بده.

گام به گام: پیاده‌سازی مودال بدون کتابخانه

حالا که با اجزای مودال آشنا شدیم، وقتشه که آستین بالا بزنیم و کدنویسی رو شروع کنیم.

مرحله اول: HTML را آماده کنید

کد HTML که در بالا دیدیم، بهترین شروع برای ساختاردهی موداله. مطمئن شو که ID‌های منحصر به فرد (مثل myModal و openModalBtn) برای دسترسی آسان با جاوااسکریپت داری. همچنین، ویژگی‌های role="dialog" و aria-modal="true" رو فراموش نکن؛ اینها برای دسترس‌پذیری حیاتی‌ان.

مرحله دوم: CSS را جان ببخشید

استایل‌های CSSی که ارائه شد، یک ظاهر مدرن و رسپانسیو رو برای مودال فراهم می‌کنه. مهم‌ترین چیز اینه که کلاس .modal رو در ابتدا display: none; قرار بدیم و وقتی می‌خوایم مودال رو نشون بدیم، کلاس .show رو بهش اضافه کنیم.

مرحله سوم: جاوااسکریپت را برنامه‌ریزی کنید

اینجا جاییه که جادو اتفاق می‌افته! ما نیاز به توابعی برای باز و بسته کردن مودال و همچنین مدیریت رویدادها داریم.

const modal = document.getElementById('myModal');
const openModalBtn = document.getElementById('openModalBtn');
const closeButtons = modal.querySelectorAll('.close-button');

// تابع برای باز کردن مودال
function openModal() {
    modal.style.display = 'flex'; // تغییر به flex برای نمایش و مرکزیت‌دهی
    setTimeout(() => {
        modal.classList.add('show');
        document.body.style.overflow = 'hidden'; // جلوگیری از اسکرول بدنه صفحه
        modal.setAttribute('aria-hidden', 'false');
        // برای دسترس‌پذیری: فوکوس را به اولین عنصر قابل فوکوس در مودال منتقل کنید
        modal.querySelector('.modal-content').focus();
    }, 10); // کمی تاخیر برای اعمال Transition
}

// تابع برای بستن مودال
function closeModal() {
    modal.classList.remove('show');
    modal.setAttribute('aria-hidden', 'true');
    document.body.style.overflow = ''; // بازگرداندن اسکرول بدنه
    setTimeout(() => {
        modal.style.display = 'none';
        // برای دسترس‌پذیری: فوکوس را به دکمه باز کننده مودال برگردانید
        openModalBtn.focus();
    }, 300); // زمان Transition را در CSS در نظر بگیرید
}

// رویدادها برای باز و بسته کردن
openModalBtn.addEventListener('click', openModal);

closeButtons.forEach(button => {
    button.addEventListener('click', closeModal);
});

// بستن مودال با کلیک روی پس‌زمینه (overlay)
modal.addEventListener('click', (event) => {
    if (event.target === modal) {
        closeModal();
    }
});


    💡 برای کپی کردن، کد را انتخاب کنید.

بهبودهای جاوااسکریپتی (Esc Key, Focus Trap)

یک مودال واقعاً کاربرپسند، باید قابلیت‌های بیشتری داشته باشه. دو مورد مهم، بستن با کلید Esc و “Focus Trap” هستن. Focus Trap یعنی وقتی مودال بازه، فوکوس کیبورد فقط داخل مودال بمونه و به عناصر پشت مودال نره.

// بستن مودال با کلید Esc
document.addEventListener('keydown', (event) => {
    if (event.key === 'Escape' && modal.classList.contains('show')) {
        closeModal();
    }
});

// Focus Trap - جلوگیری از خروج فوکوس از مودال
function trapFocus(element) {
    const focusableEls = element.querySelectorAll('a[href]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input[type="text"]:not([disabled]), input[type="radio"]:not([disabled]), input[type="checkbox"]:not([disabled]), select:not([disabled])');
    const firstFocusableEl = focusableEls[0];
    const lastFocusableEl = focusableEls[focusableEls.length - 1];

    if (!firstFocusableEl) return; // اگر عنصری برای فوکوس وجود ندارد

    element.addEventListener('keydown', function(e) {
        const isTabPressed = (e.key === 'Tab' || e.keyCode === 9);

        if (!isTabPressed) {
            return;
        }

        if (e.shiftKey) { // اگر Shift + Tab فشرده شده
            if (document.activeElement === firstFocusableEl) {
                lastFocusableEl.focus();
                e.preventDefault();
            }
        } else { // اگر فقط Tab فشرده شده
            if (document.activeElement === lastFocusableEl) {
                firstFocusableEl.focus();
                e.preventDefault();
            }
        }
    });

    // در زمان باز شدن مودال، فوکوس را به اولین عنصر قابل فوکوس بده
    firstFocusableEl.focus();
}

// تغییر در تابع openModal برای فعال کردن Focus Trap
function openModal() {
    modal.style.display = 'flex';
    setTimeout(() => {
        modal.classList.add('show');
        document.body.style.overflow = 'hidden';
        modal.setAttribute('aria-hidden', 'false');
        trapFocus(modal.querySelector('.modal-content')); // فعال کردن Focus Trap
    }, 10);
}


    💡 برای کپی کردن، کد را انتخاب کنید.

بهینه‌سازی عملکرد و رسپانسیو بودن

ساختن یک مودال سبک و سریع فقط به حذف کتابخانه‌ها محدود نمیشه؛ باید به جزئیات بهینه‌سازی هم دقت کنیم.

CSS بهینه برای موبایل و تبلت

همونطور که توی کد CSS بالا دیدیم، استفاده از @media کوئری‌ها برای تنظیم عرض مودال در دستگاه‌های مختلف حیاتیه. برای موبایل، ممکنه بخوای عرض مودال بیشتر باشه تا فضای کمتری هدر بره. همچنین مطمئن شو که پدینگ و فونت‌سایزها هم در موبایل مناسب هستند.

جاوااسکریپت سبک و کارآمد

کد جاوااسکریپت ما در حال حاضر بسیار سبک و بهینه است. اما همیشه می‌تونی با دقت به جزئیات، اون رو بهتر کنی:

• عدم استفاده از انیمیشن‌های سنگین: از انیمیشن‌های CSSی که از خصوصیات transform و opacity استفاده می‌کنند (مثل کاری که ما کردیم) به جای width، height یا margin استفاده کن. اینها پرفورمنس بهتری دارن.
• Event Delegation: اگر چندین دکمه مودال یا عناصر تعاملی داری، به جای اضافه کردن Event Listener به هر کدوم، از Event Delegation استفاده کن تا تعداد Listenerها رو کاهش بدی.

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

دسترس‌پذیری برای هر مودالی ضروریه. این یعنی کاربرانی که از صفحه‌خوان (screen reader) یا کیبورد استفاده می‌کنن، باید بتونن به راحتی با مودال شما تعامل داشته باشن.

• ویژگی‌های ARIA: استفاده از role="dialog"، aria-modal="true" و aria-labelledby به صفحه‌خوان‌ها کمک می‌کنه تا مودال رو به درستی شناسایی کنن.
• مدیریت فوکوس: بعد از باز شدن مودال، فوکوس باید به اولین عنصر قابل تعامل داخل مودال منتقل بشه (این رو در تابع openModal دیدیم). بعد از بسته شدن، فوکوس باید به عنصری که مودال رو باز کرده بود، برگرده.
• کلید Esc: بستن مودال با کلید Esc یک انتظار استاندارد دسترس‌پذیریه.
• قفل فوکوس (Focus Trap): این یکی از مهمترین اصول برای مودال‌های دسترس‌پذیره که توی بخش جاوااسکریپت پیاده‌سازی کردیم.
• متن جایگزین (Alt text) برای تصاویر: اگر مودال شما شامل تصاویر هست، مطمئن شوید که alt مناسب دارند.

سناریوهای پیشرفته و نکات تکمیلی

تا اینجا، ما یک مودال پایه و قوی ساختیم. اما چی میشه اگه بخوایم یه کم پیشرفته‌تر عمل کنیم؟

مودال‌های چندگانه (Multiple Modals)

اگر چندین مودال در صفحه‌ات داری، می‌تونی کد جاوااسکریپت رو به صورت یک فانکشن جنریک (General Function) بنویسی که بتونه هر مودالی رو باز و بسته کنه. به جای اینکه ID‌ها رو هاردکد کنی، ID مودال رو به عنوان پارامتر به تابع ارسال کن.

function initializeModal(modalId, openBtnId) {
    const modal = document.getElementById(modalId);
    const openBtn = document.getElementById(openBtnId);
    const closeBtns = modal.querySelectorAll('.close-button');

    function openThisModal() {
        modal.style.display = 'flex';
        setTimeout(() => {
            modal.classList.add('show');
            document.body.style.overflow = 'hidden';
            modal.setAttribute('aria-hidden', 'false');
            trapFocus(modal.querySelector('.modal-content'));
        }, 10);
    }

    function closeThisModal() {
        modal.classList.remove('show');
        modal.setAttribute('aria-hidden', 'true');
        document.body.style.overflow = '';
        setTimeout(() => {
            modal.style.display = 'none';
            if (openBtn) openBtn.focus();
        }, 300);
    }

    if (openBtn) openBtn.addEventListener('click', openThisModal);
    closeBtns.forEach(button => button.addEventListener('click', closeThisModal));
    modal.addEventListener('click', (event) => {
        if (event.target === modal) {
            closeThisModal();
        }
    });
    document.addEventListener('keydown', (event) => {
        if (event.key === 'Escape' && modal.classList.contains('show')) {
            closeThisModal();
        }
    });
}

// برای هر مودال:
initializeModal('myModal', 'openModalBtn');
// initializeModal('anotherModalId', 'openAnotherModalBtn');

    💡 برای کپی کردن، کد را انتخاب کنید.

بارگذاری محتوای داینامیک (Dynamic Content Loading)

گاهی اوقات نیاز داری که محتوای مودال رو از طریق AJAX بارگذاری کنی. مثلاً وقتی کاربر روی یک آیتم کلیک می‌کنه، اطلاعات مربوط به اون آیتم در مودال نمایش داده بشه.

• میتونی در تابع openModal (قبل از نمایش مودال)، یک درخواست fetch به سرور بفرستی، اطلاعات رو دریافت کنی و سپس عناصر مربوط به .modal-body رو با محتوای جدید آپدیت کنی.
• یک پیام “در حال بارگذاری…” (loading spinner) هم می‌تونه تجربه کاربری رو بهبود ببخشه تا کاربر منتظر نمونه.

انیمیشن‌ها و ترنزیشن‌های جذاب

ما از انیمیشن ساده transform و opacity استفاده کردیم. اما می‌تونی خلاقیت به خرج بدی و انیمیشن‌های ورود و خروج رو جذاب‌تر کنی. مثلاً:

• Slide-in/Slide-out: از transform: translateX() یا translateY() برای ورود از کنار یا بالا/پایین استفاده کن.
• Scale-in/Scale-out: از transform: scale() برای بزرگ شدن/کوچک شدن مودال استفاده کن.

عیب‌یابی سریع (Troubleshooting)

مشکلات رایج که ممکنه باهاشون روبرو بشی و راه‌حل‌های سریع:

سوالات متداول (FAQ)