یک مودال ساده با HTML/CSS/JavaScript بسازید که با کلیک روی یک دکمه باز شود و با کلیک روی دکمهٔ بستن، کلیک خارج از پنجرهٔ مودال یا فشار کلید Escape بسته شود.
1.0 بازدید آخرین ویرایش در 202 روز قبل ساعت 02:55 0.0
برای حل این مسئله از HTML برای ساختار مودال (یک overlay و یک پنجرهٔ محتوا)، CSS برای مخفی/نمایان کردن مودال (مثلاً کلاس .open یا .hidden) و JavaScript برای مدیریت رویدادها استفاده کنید. با document.querySelector عناصر را بگیرید، با addEventListener روی دکمهٔ باز کردن و بستن کلیک کنید، روی overlay کلیک بررسی کنید تا بسته شود و با keydown در document به کلید Escape گوش دهید؛ از classList.toggle یا classList.add/remove برای نمایش/پنهان کردن استفاده کنید و برای دسترسی بهتر از aria-hidden یا انتقال فوکوس به اولین المان قابل تعامل داخل مودال بهره ببرید.
توسط پژوهشگر در 202 روز قبل ساعت 02:55 1 پاسخ
جدید ترین قدیمی ترین بالاترین امتیاز پاسخ های من
در حال بارگیری...
برای ارسال پاسخ باید با حساب کاربری وارد شوید.
ورود به حساب کاربری
برای دسترسی بهتر، مودال را بهعنوان یک dialog با aria-modal='true' و role='dialog' معرفی کنید و فوکوس را به اولین عنصر قابلتعامل داخل پنجره منتقل کنید. برای مدیریت نمایش، از کلاسهای open/hidden با classList استفاده کنید و aria-hidden را همزمان با تغییر نمایش بهروزرسانی کنید. برای تجربه کاربری کامل، یک focus trap اضافه کنید تا با کلید Tab فوکوس فقط درون مودال حرکت کند و پس از بستن به عنصر قبلی بازگردد؛ Escape و کلیک روی overlay هم مودال را ببندند. و برای دسترسی بهتر، اطمینان دهید که دکمهٔ بستن و سایر عناصر قابلتعامل دارای tabindex مناسب و توضیحات aria مناسب باشند.
گزارش