Overview
"Modal", "pop-up", "popover", "lightbox", "dialog box" — මේ UI terms බොහෝවිට confuse වෙනවා. මේ reference එකෙන් හැම එකක්ම define කරලා, ඒවා වෙනස් වෙන්නේ කොහොමද කියලා පැහැදිලි කරලා, කවදද කොයි එකද පාවිච්චි කරන්නේ කියලා guidance දෙනවා.
Common UI overlay elements compare කරනවා.
Key Takeaways
- Modal එකක් dismiss කරනකම් interaction block කරනවා; popover එකක් නෑ.
- Pop-ups කියන්නේ separate windows; popovers කියන්නේ inline overlays.
- Lightbox එකකින් media වලට focus කරන්න page එක dim කරනවා.
- Dialog box එකක් කියන්නේ input හෝ confirmation ඉල්ලන කුඩා modal එකක්.
Pop-Up
Page එක උඩ පෙන්නන separate browser window එකක් හෝ overlay එකක් — බොහෝවිට ads, sign-ups, හෝ notifications වලට. Pop-ups browsers වලින් block කරන්න පුළුවන්, බොහෝවිට dismissible.
Pop-up එකක උදාහරණයක්.
Modal
ඔබ ඒක මත act කරනකම් (confirm, cancel, හෝ close) interface එකේ ඉතුරු කොටස block කරන overlay එකක්. ඒක focus force කරනවා, critical actions හෝ forms වලට common.
Modal එකක උදාහරණයක්.
Lightbox / Theatre
Background එක dim කරලා media — බොහෝවිට image එකක් හෝ video එකක් — screen එකේ මැද spotlight කරන modal variant එකක්.
Lightbox එකක උදාහරණයක්.
Popover
Element එකකට (button එකක් වගේ) anchor වුණ, extra info හෝ actions පෙන්නන කුඩා, non-blocking overlay එකක්. Modal එකක් වගේ නෙවෙයි, ඔබට තවම page එක එක්ක interact කරන්න පුළුවන්.
Popover එකක උදාහරණයක්.
Window
ඒකේම title bar එකයි controls එකයි තියෙන full, independent application හෝ browser window එකක්. ඒක content වලට top-level container එක.
Tab
අලුත් ඒවා open නොකර එකම window එක ඇතුළේ views අතර switch කරන ක්රමයක් — content organise කරන්න browsers සහ apps පාවිච්චි කරනවා.
Window එකක් ඇතුළේ tabs කිහිපයක උදාහරණයක්.
Dialog Box
Decision එකක් හෝ input ඉල්ලන කුඩා modal එකක් — බ. OK/Cancel එක්ක "Save changes?". ඒක focused, බොහෝවිට answer කරනකම් block කරනවා.
Dialog box එකක උදාහරණයක්.
කොයි එකද පාවිච්චි කරන්නේ
- Decision එකක් ඕන critical actions වලට modal/dialog එකක් පාවිච්චි කරන්න.
- Contextual, non-blocking hints හෝ menus වලට popover එකක් පාවිච්චි කරන්න.
- Images හෝ video showcase කරන්න lightbox එකක් පාවිච්චි කරන්න.
- Pop-ups sparingly පාවිච්චි කරන්න — ඒවා ලේසියෙන් block වෙනවා, users ලා කරදර කරන්න පුළුවන්.
Conclusion
ප්රධාන වෙනස තමයි element එක interaction block කරනවද (modals, dialogs, lightboxes) නැද්ද (popovers), සහ ඒක separate window එකක්ද (pop-ups, windows) inline ද කියන එක. හරි pattern එක තෝරාගැනීමෙන් interfaces clear සහ user-friendly තියෙනවා.
About TechHub
මේ guide එක TechHub Knowledge Base එකේ කොටසක්. තව step-by-step IT guides සහ support වලට techhub.com.lk එකට යන්න.
