# Modal ## Description 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. ## 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. | | 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. | | ForceAnimation | `bool` | false | Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested. | | 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. | ## 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. | ## Enums ### 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. | ## Sub Classes ### 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. | ## Examples \n**Basic**: ```razor Open Modal
In the beginning, there is silence a blank canvas yearning to be filled, a quiet space where creativity waits to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be shaped into meaning, and the emotions ready to resonate with every reader.
In this space, potential reigns supreme. It is a moment suspended in time, where imagination dances freely and each word has the power to transform into something extraordinary. Here lies the start of something new-an opportunity to craft, inspire, and create. Whether it's a tale of adventure, a reflection of truth, or an idea that sparks change, these lines are yours to fill, to shape, and to make uniquely yours. The journey begins here, in this quiet moment where everything is possible.
``` ```csharp private bool isOpenBasic; ``` \n**Customizing content**: ```razor Open Modal ``` ```csharp private bool isOpenCustomContent; ``` \n**Blocking**: ```razor Open blocking Modal ``` ```csharp private bool isOpenBlocking; ``` \n**Events**: ```razor Open Modal
Dismissed? [@isDismissed]
Overlay clicked? [@isOverlayClicked]
``` ```csharp private bool isEventsOpen; private bool isDismissed; private bool isOverlayClicked; private async Task HandleOnDismiss() { isDismissed = true; await Task.Delay(3000); isDismissed = false; } private void HandleOnOverlayClick() { isOverlayClicked = true; _ = Task.Delay(2000).ContinueWith(_ => { isOverlayClicked = false; InvokeAsync(StateHasChanged); }); } ``` \n**Style & Class**: ```razor Open styled modal Open classed modal Open modal styles Open modal classes ``` ```csharp private bool isOpenStyle; private bool isOpenClass; private bool isOpenStyles; private bool isOpenClasses; ``` \n**RTL**: ```razor باز کردن مُدال ``` ```csharp private bool isOpenRtl; ```