# Modal Modal component displays important information, confirmations, or actions in a focused overlay above the main interface. It requires user interaction before returning to the underlying content. **Category:** Components **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-modal--introduction ## Variants documented in Storybook - StandardModals: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-modal--standardmodals - ModalCenter: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-modal--modalcenter - ModalBackdrops: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-modal--modalbackdrops ## Framework setup ### HTML / CDN ```html ``` ### React ```bash npm install ux4g-web-components ``` ```jsx import 'ux4g-web-components/styles.css'; import 'ux4g-web-components/design-system'; ``` ### Angular Update `angular.json`: ```json { "styles": [ "node_modules/ux4g-web-components/styles/ux4g.css", "src/styles.css" ], "scripts": [ "node_modules/ux4g-web-components/dist/runtime/design-system.js" ] } ``` ## Code examples The snippets below are extracted from the Storybook canvas for Modal. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Introduction — Introduction HTML: ```html
Components

Modal

Modal component displays important information, confirmations, or actions in a focused overlay above the main interface. It requires user interaction before returning to the underlying content.

Implementation Showcase

1. Modal (Regular & Image)

token

Header

Write description here

Subtitle

A modal demands the user’s attention by temporarily disabling interaction with the rest of the page.

token

Image Header

A visually engaging modal variant with hero imagery.

2. Modal (Danger)

token

Header

Write description here

Subtitle

A modal is a design element that pops up over the main content of a webpage.

token

Header

Write description here

Subtitle

A danger modal variant with hero imagery.

3. Modal (Center)

token

Header

Write description here

Subtitle

The content within this modal is horizontally centered for maximum focus.

token

Header

Write description here

Subtitle

Centered content variant with hero imagery.

CSS Class Reference

Quickly copy modal size, layout, and backdrop utilities.

Size Utilities

ux4g-modal-s
ux4g-modal-m
ux4g-modal-l

Position & Type Utilities

Centered contentux4g-modal-center-content
Danger borderux4g-border-error
Danger actionux4g-btn-danger

Backdrop Utilities

25% Opacity Background ux4g-modal-backdrop-25
50% Opacity Background ux4g-modal-backdrop-50
75% Opacity Background ux4g-modal-backdrop-75
8px Backdrop Blur ux4g-modal-backdrop-blur
``` React: ```jsx import React from 'react'; const ModalExample1Demo = () => ( <>
Components

Modal

Modal component displays important information, confirmations, or actions in a focused overlay above the main interface. It requires user interaction before returning to the underlying content.

Implementation Showcase

{/* 1. Modal (Regular & Image) */}

1. Modal (Regular & Image)

token

Header

Write description here

Subtitle

A modal demands the user’s attention by temporarily disabling interaction with the rest of the page.

token

Image Header

A visually engaging modal variant with hero imagery.

{/* 2. Modal (Danger) */}

2. Modal (Danger)

token

Header

Write description here

Subtitle

A modal is a design element that pops up over the main content of a webpage.

token

Header

Write description here

Subtitle

A danger modal variant with hero imagery.

{/* 3. Modal (Center) */}

3. Modal (Center)

token

Header

Write description here

Subtitle

The content within this modal is horizontally centered for maximum focus.

token

Header

Write description here

Subtitle

Centered content variant with hero imagery.

CSS Class Reference

Quickly copy modal size, layout, and backdrop utilities.

Size Utilities

ux4g-modal-s
ux4g-modal-m
ux4g-modal-l

Position & Type Utilities

Centered content ux4g-modal-center-content
Danger border ux4g-border-error
Danger action ux4g-btn-danger

Backdrop Utilities

25% Opacity Background ux4g-modal-backdrop-25
50% Opacity Background ux4g-modal-backdrop-50
75% Opacity Background ux4g-modal-backdrop-75
8px Backdrop Blur ux4g-modal-backdrop-blur
); export default ModalExample1Demo; ``` Angular: ```html
Components

Modal

Modal component displays important information, confirmations, or actions in a focused overlay above the main interface. It requires user interaction before returning to the underlying content.

Implementation Showcase

1. Modal (Regular & Image)

token

Header

Write description here

Subtitle

A modal demands the user’s attention by temporarily disabling interaction with the rest of the page.

token

Image Header

A visually engaging modal variant with hero imagery.

2. Modal (Danger)

token

Header

Write description here

Subtitle

A modal is a design element that pops up over the main content of a webpage.

token

Header

Write description here

Subtitle

A danger modal variant with hero imagery.

3. Modal (Center)

token

Header

Write description here

Subtitle

The content within this modal is horizontally centered for maximum focus.

token

Header

Write description here

Subtitle

Centered content variant with hero imagery.

CSS Class Reference

Quickly copy modal size, layout, and backdrop utilities.

Size Utilities

ux4g-modal-s
ux4g-modal-m
ux4g-modal-l

Position & Type Utilities

Centered contentux4g-modal-center-content
Danger borderux4g-border-error
Danger actionux4g-btn-danger

Backdrop Utilities

25% Opacity Background ux4g-modal-backdrop-25
50% Opacity Background ux4g-modal-backdrop-50
75% Opacity Background ux4g-modal-backdrop-75
8px Backdrop Blur ux4g-modal-backdrop-blur
``` ### 2. Modal Backdrops — % Opacity Backdrop HTML: ```html
``` React: ```jsx import React from 'react'; const ModalExample2Demo = () => ( <> {/* Variant: Modal Trigger - 25% Opacity Backdrop */} {/* Variant: Modal Backdrop - 25% Opacity */}
token

25% Backdrop

Write description here

Action

Standard system overlay with 25% opacity.

); export default ModalExample2Demo; ``` Angular: ```html
``` ### 3. Modal Backdrops — % Opacity Backdrop HTML: ```html
``` React: ```jsx import React from 'react'; const ModalExample3Demo = () => ( <>
token

50% Backdrop

Write description here

Action

Increased contrast for higher focus.

); export default ModalExample3Demo; ``` Angular: ```html
``` ### 4. Modal Backdrops — % Opacity Backdrop HTML: ```html
``` React: ```jsx import React from 'react'; const ModalExample4Demo = () => ( <>
token

75% Backdrop

Write description here

Action

Strongest focus level with near-black backdrop.

); export default ModalExample4Demo; ``` Angular: ```html
``` ### 5. Modal Backdrops — Blur Backdrop HTML: ```html
``` React: ```jsx import React from 'react'; const ModalExample5Demo = () => ( <>
token

Blur Header

Write description here

Action

Gaussian blur effect applied to the content underneath.

); export default ModalExample5Demo; ``` Angular: ```html
``` ### 6. Modal Center — Modal Small Center HTML: ```html ``` React: ```jsx import React from 'react'; const ModalExample6Demo = () => ( <> {/* Variant: Modal Small Center */} ); export default ModalExample6Demo; ``` Angular: ```html ``` ### 7. Modal Center — Modal Medium Center HTML: ```html ``` React: ```jsx import React from 'react'; const ModalExample7Demo = () => ( <> {/* Variant: Modal Medium Center */} ); export default ModalExample7Demo; ``` Angular: ```html ``` ### 8. Modal Center — Modal Large Center HTML: ```html ``` React: ```jsx import React from 'react'; const ModalExample8Demo = () => ( <> {/* Variant: Modal Large Center */} ); export default ModalExample8Demo; ``` Angular: ```html ``` ### 9. Standard Modals — Modal Small HTML: ```html ``` React: ```jsx import React from 'react'; const ModalExample9Demo = () => ( <> {/* Variant: Modal Small */} ); export default ModalExample9Demo; ``` Angular: ```html ``` ### 10. Standard Modals — Modal Small Danger HTML: ```html ``` React: ```jsx import React from 'react'; const ModalExample10Demo = () => ( <> {/* Variant: Modal Small Danger Variants */} ); export default ModalExample10Demo; ``` Angular: ```html ``` ### 11. Standard Modals — Modal Medium HTML: ```html ``` React: ```jsx import React from 'react'; const ModalExample11Demo = () => ( <> {/* Variant: Modal Medium */} ); export default ModalExample11Demo; ``` Angular: ```html ``` ### 12. Standard Modals — Modal Large HTML: ```html ``` React: ```jsx import React from 'react'; const ModalExample12Demo = () => ( <> {/* Variant: Modal Large */} ); export default ModalExample12Demo; ``` Angular: ```html ``` ## Accessibility notes - Use semantic HTML and required ARIA attributes where the Storybook example shows them. - Ensure visible focus indicators and keyboard operability. - Test color contrast against WCAG 2.1 AA.