Modals
Bootstrap Modals (ប៉ុប-អាប់)
Modal គឺជា dialog box/popup window ដែលបង្ហាញពីលើខ្លឹមសារជាមួយ layer ដែលបង្កើត overlay ពីលើទំព័រ។ អ្នកប្រើសម្រាប់ login forms, confirmations, alerts, និង image galleries។
📋 Modal Structure
| Component | Class | Purpose | Required? |
|---|---|---|---|
| Modal Container | .modal .fade |
Outer wrapper (hidden by default) | ✅ Always |
| Modal Dialog | .modal-dialog |
Centers modal on screen | ✅ Always |
| Modal Content | .modal-content |
White box with border/shadow | ✅ Always |
| Modal Header | .modal-header |
Top section (title + close button) | ⭐ Recommended |
| Modal Title | .modal-title |
Heading in header | ⭐ Recommended |
| Modal Body | .modal-body |
Main content area | ✅ Always |
| Modal Footer | .modal-footer |
Bottom section (action buttons) | ⭕ Optional |
| Close Button | .btn-close |
X button to dismiss modal | ⭐ Recommended |
📝 Modal Trigger Attributes
| Attribute | Value | Placement | Purpose |
|---|---|---|---|
| data-bs-toggle | "modal" |
On trigger button | Tells Bootstrap this button opens a modal |
| data-bs-target | "#modalId" |
On trigger button | Specifies which modal to open (ID selector) |
| data-bs-dismiss | "modal" |
On close button | Closes the modal when clicked |
| id | Unique identifier | On modal container | Links modal to trigger button |
Modal Sizes & Scrolling
Bootstrap ផ្តល់ modal sizes ចាប់ពី small ដល់ fullscreen និង scrollable options។
📏 Modal Size Options
| Size | Class | Max Width | Use Case |
|---|---|---|---|
| Small | .modal-sm |
300px | Simple confirmations, alerts ("Are you sure?") |
| Default | (none) | 500px | Standard forms, notifications |
| Large | .modal-lg |
800px | Complex forms, data tables, multiple columns |
| Extra Large | .modal-xl |
1140px | Large images, detailed dashboards, wide content |
| Fullscreen | .modal-fullscreen |
100% viewport | Image galleries, video players, immersive content |
| Fullscreen (Below breakpoint) | .modal-fullscreen-sm-down |
Full on mobile, sized on desktop | Responsive modals (mobile-first approach) |
📜 Modal Behavior Options
| Option | Class/Attribute | Effect |
|---|---|---|
| Vertically Centered | .modal-dialog-centered |
Centers modal vertically on screen |
| Scrollable | .modal-dialog-scrollable |
Enables scrolling inside modal body (header/footer fixed) |
| Fade Animation | .fade |
Smooth fade-in/fade-out transition |
| Static Backdrop | data-bs-backdrop="static" |
Clicking outside doesn't close modal (force user action) |
| No Backdrop | data-bs-backdrop="false" |
No dark overlay behind modal |
| Keyboard Close | data-bs-keyboard="false" |
Prevent closing with Esc key |
🎴 Combining Size & Position
| Combination | Classes | Result |
|---|---|---|
| Large + Centered | .modal-dialog .modal-lg .modal-dialog-centered |
800px wide modal in center of screen |
| Small + Scrollable | .modal-dialog .modal-sm .modal-dialog-scrollable |
Compact modal with scrolling content |
| XL + Centered + Scrollable | .modal-dialog .modal-xl .modal-dialog-centered .modal-dialog-scrollable |
Large centered modal with long scrollable content |
Modal with Forms
អ្នកអាចដាក់ forms ក្នុង modals សម្រាប់ login, signup, និង data entry។
📝 Modal with Forms - Common Patterns
| Pattern | Implementation | Use Case |
|---|---|---|
| Login Form | Small modal, username/password inputs, submit button in footer | User authentication |
| Signup Form | Large modal, multiple input fields, validation | User registration |
| Contact Form | Default modal, name/email/message, send button | Quick contact without page navigation |
| Confirmation Dialog | Small modal, yes/no buttons, static backdrop | Delete confirmations, important actions |
| Data Entry Form | Large/XL modal, multiple fields, save/cancel buttons | Add/edit records (CRUD operations) |
🔗 Modal Chaining & JavaScript Control
| Feature | Method | Example |
|---|---|---|
| Open Modal from JS | modal.show() |
const modal = new bootstrap.Modal('#myModal'); modal.show(); |
| Close Modal from JS | modal.hide() |
modal.hide(); |
| Toggle Modal | modal.toggle() |
Open if closed, close if open |
| Modal Chaining | Use data-bs-dismiss + data-bs-toggle + data-bs-target |
Close current modal and open another (e.g., Login → Signup) |
| Event Listeners | modal.addEventListener('shown.bs.modal', callback) |
Run code when modal opens (focus input, load data) |
✅ Modal Best Practices
| ✅ DO | ❌ DON'T |
|---|---|
| Use modals for quick tasks (login, confirmation) | Use modals for long forms or multi-step processes |
| Always provide a clear way to close modal | Trap users in modal with no close button |
| Use appropriate size for content | Use fullscreen for simple alerts |
| Keep modal content focused and minimal | Cram entire pages into modals |
| Use static backdrop for important actions | Make every modal require forced interaction |
| Test modals on mobile devices | Assume modals work well on all screen sizes |