یک مودال (دیالوگ) ساده با HTML/CSS/JavaScript بساز که با کلیک روی یک دکمه باز شود و با کلیک روی دکمه بستن، کلیک روی بکدراپ یا زدن کلید Escape بسته شود.
6.0 بازدید آخرین ویرایش در 202 روز قبل ساعت 02:57 0.0
برای حل: ساختار HTML شامل دکمه باز کردن، یک عنصر بکدراپ و کانتینر مودال باشد؛ با CSS نمایش/پنهان شدن مودال را با کلاس (مثلاً .open) کنترل کنید و برای جلوهها از transition و ظاهر نیمهشفاف برای بکدراپ استفاده کنید. در JavaScript با event listenerها روی دکمهها و بکدراپ کلاس نمایش را اضافه/حذف کنید و یک listener روی document برای کلید Escape قرار دهید؛ برای دسترسی بهتر aria-role="dialog" و مدیریت فوکوس (تمرکز) و جلوگیری از اسکرول بدنه هنگام باز بودن مودال را در نظر بگیرید. نکتهها: چک کنید کلیک داخل محتوی مودال جلوی بستن را نگه دارد (stopPropagation)، و برای کاربران صفحهخوان aria-hidden را تنظیم کنید.
توسط پژوهشگر در 202 روز قبل ساعت 02:57 2 پاسخ
جدید ترین قدیمی ترین بالاترین امتیاز پاسخ های من
در حال بارگیری...
برای ارسال پاسخ باید با حساب کاربری وارد شوید.
ورود به حساب کاربری
برای دسترسی بهتر از role="dialog" و aria-modal="true" استفاده کنید و فوکوس را به داخل مودال منتقل کنید و قبل از باز شدن روی عنصر فعال اولیه ذخیره کنید تا با بستن به آن برگردد. با استفاده از یک listener برای کلید Escape و کلیک روی بکدراپ، مودال را بندید و اطمینان حاصل کنید که کلیک داخل محتوا با stopPropagation جلوی بسته شدن را بگیرد. همچنین وقتی مودال باز است، اسکرول بدنه را با overflow: hidden یا کلاس مخصوص غیرفعال کنید تا تجربه کاربری همگام باشد. در نظر داشته باشید با هر باز و بسته شدن، aria-hidden را برای سایر محتوا بهروزرسانی کنید تا کاربران صفحهخوان به درستی رفتار کنند.
گزارش