Back to Glossary

Modal

النافذة المنبثقة (Modal)

GLS-000132

Beginnerui-ux1 min read
dialogpopupoverlaymodal dialoglightbox
Official DocsSign in to save & take notes

Definition

A pop-up window that appears over the main content, requiring the user to interact with it before continuing.

نافذة منبثقة تظهر فوق المحتوى الرئيسي، تتطلب من المستخدم التفاعل معها قبل المتابعة.

Why It Matters

Modals are used throughout 404Fault for confirmations and forms. A poorly implemented modal that traps keyboard users or breaks focus is a bad UX.

تُستخدم المودالات في 404Fault للتأكيدات والنماذج. مودال مُطبَّق بشكل سيئ يحبس مستخدمي لوحة المفاتيح أو يكسر التركيز هو تجربة مستخدم سيئة.

Full Definition

A modal is a UI pattern that overlays the main screen, blocking interaction with the background until dismissed. Common uses: confirmation dialogs ('Are you sure you want to delete this?'), forms (create new project), image previews. Modals must be accessible: trap focus inside while open, close on Escape key, announce to screen readers with role='dialog'.
المودال هو نمط UI يتراكب على الشاشة الرئيسية، مما يحجب التفاعل مع الخلفية حتى يُغلَق. الاستخدامات الشائعة: مربعات حوار التأكيد ('هل أنت متأكد أنك تريد حذف هذا؟') والنماذج (إنشاء مشروع جديد) ومعاينات الصور. يجب أن تكون المودالات يمكن الوصول إليها: احتجاز التركيز بداخلها أثناء الفتح والإغلاق بمفتاح Escape والإعلان لقارئات الشاشة بـ role='dialog'.

Example Usage

“Clicking 'Add Note' on a glossary term opens a modal with a text area. The user types their note, clicks Save, and the modal closes.”

“النقر على 'إضافة ملاحظة' على مصطلح في الغلوساري يفتح مودال بمنطقة نص. يكتب المستخدم ملاحظته وينقر حفظ ويُغلَق المودال.”

Knowledge Graph

AI Builder Tips

Sign in for more features

Avoid these mistakes when using Modal:

1

Not trapping focus inside the modal (Tab key escapes to page background)

2

Opening a modal that's impossible to close on mobile (no X button, Escape doesn't work)

Sign in to unlock guided AI explanations from AI Teacher.

Generate a Prompt

Copy this prompt and use it directly with any AI model — no setup needed.

Ready-to-Use Prompt
Help me build a project using Modal.

Explain:
1. What is Modal and why it matters
2. The core architecture and required tools
3. Step-by-step implementation plan
4. Common mistakes to avoid: Not trapping focus inside the modal (Tab key escapes to page background), Opening a modal that's impossible to close on mobile (no X button, Escape doesn't work)
5. Best practices and production tips

Official Resources

Official Documentation
Browse all AI termsCreate free account