Modal
Modals are temporary pop-ups that take focus from the page or app and require people to interact with them. Unlike a dialog box (Dialog), a modal should be used for hosting lengthy content, such as privacy statements or license agreements, or for asking people to perform complex or multiple actions, such as changing settings.
Notes
There are two different modal components available for different purposes: BitModal is a basic, lightweight modal for simple pop-up content, while BitProModal is an advanced modal with extra features such as dragging, blocking, modeless, positioning, full-size and scroll handling. Pick the one that fits your use-case.
Usage
Basic
Customizing content
Blocking
When Blocking is enabled, the Modal can no longer be light dismissed by clicking on the overlay.
Users have to use an explicit action (like a close button) to dismiss it.
Events
Discover different events available in the BitModal component.
Dismissed? [False]
Overlay clicked? [False]
Style & Class
Using css related parameter users can further customize the modal based on their needs.
Component's Style & Class:
Styles & Classes:
RTL
Use BitModal in right-to-left (RTL).
API
BitModal parameters
| Name | Type | Default value | Description |
|---|---|---|---|
| Blocking | bool | false | When enabled, prevents the Modal from being light dismissed by clicking outside the Modal (on the overlay). |
| ChildContent | RenderFragment? | null | The content of Modal, It can be Any custom tag or a text. |
| Classes | BitModalClassStyles? | null | Custom CSS classes for different parts of the BitModal component. |
| FullHeight | bool | false | Makes the Modal height 100% of its parent container. |
| FullWidth | bool | false | Makes the Modal width 100% of its parent container. |
| IsAlert | bool? | null | Determines the ARIA role of the Modal (alertdialog/dialog). |
| IsOpen | bool | false | Whether the Modal is displayed. |
| OnDismiss | EventCallback<MouseEventArgs> | A callback function for when the Modal is dismissed. | |
| OnOverlayClick | EventCallback<MouseEventArgs> | A callback function for when somewhere on the overlay element of the Modal is clicked. | |
| Styles | BitModalClassStyles? | null | Custom CSS styles for different parts of the BitModal component. |
| SubtitleAriaId | string? | null | ARIA id for the subtitle of the Modal, if any. |
| TitleAriaId | string? | null | ARIA id for the title of the Modal, if any. |
BitComponentBase parameters
| Name | Type | Default value | Description |
|---|---|---|---|
| AriaLabel | string? | null | Gets or sets the accessible label for the component, used by assistive technologies. |
| Class | string? | null | Gets or sets the CSS class name(s) to apply to the rendered element. |
| Dir | BitDir? | null | Gets or sets the text directionality for the component's content. |
| HtmlAttributes | Dictionary<string, object> | new Dictionary<string, object>() | Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters. |
| Id | string? | null | Gets or sets the unique identifier for the component's root element. |
| IsEnabled | bool | true | Gets or sets a value indicating whether the component is enabled and can respond to user interaction. |
| Style | string? | null | Gets or sets the CSS style string to apply to the rendered element. |
| TabIndex | string? | null | Gets or sets the tab order index for the component when navigating with the keyboard. |
| Visibility | BitVisibility | BitVisibility.Visible | Gets or sets the visibility state (visible, hidden, or collapsed) of the component. |
BitComponentBase public members
| Name | Type | Default value | Description |
|---|---|---|---|
| UniqueId | Guid | Guid.NewGuid() | Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed. |
| RootElement | ElementReference | Gets the reference to the root HTML element associated with this component. |
BitModalClassStyles properties
| Name | Type | Default value | Description |
|---|---|---|---|
| Root | string? | null | Custom CSS classes/styles for the root element of the BitModal. |
| Overlay | string? | null | Custom CSS classes/styles for the overlay of the BitModal. |
| Content | string? | null | Custom CSS classes/styles for the content of the BitModal. |
BitVisibility enum
| Name | Value | Description |
|---|---|---|
| Visible | 0 | The content of the component is visible. |
| Hidden | 1 | The content of the component is hidden, but the space it takes on the page remains (visibility:hidden). |
| Collapsed | 2 | The component is hidden (display:none). |
BitDir enum
| Name | Value | Description |
|---|---|---|
| Ltr | 0 | Ltr (left to right) is to be used for languages that are written from the left to the right (like English). |
| Rtl | 1 | Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic). |
| Auto | 2 | Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element. |
Feedback
You can give us your feedback through our GitHub repo by filing a new Issue or starting a new Discussion.
Or you can review / edit this page on GitHub.
- On this page