- bit BlazorUI
Home Docs

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.

Usage

Basic
Customizing content
Advanced options
BitModal has some advanced options.





Absolute positioning
BitModal has an absolute position option to further customize its location.




Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh, ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros. Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante. Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend efficitur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh, ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros. Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante. Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend efficitur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh, ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros. Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante. Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend efficitur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas lorem nulla, malesuada ut sagittis sit amet, vulputate in leo. Maecenas vulputate congue sapien eu tincidunt. Etiam eu sem turpis. Fusce tempor sagittis nunc, ut interdum ipsum vestibulum non. Proin dolor elit, aliquam eget tincidunt non, vestibulum ut turpis. In hac habitasse platea dictumst. In a odio eget enim porttitor maximus. Aliquam nulla nibh, ullamcorper aliquam placerat eu, viverra et dui. Phasellus ex lectus, maximus in mollis ac, luctus vel eros. Vivamus ultrices, turpis sed malesuada gravida, eros ipsum venenatis elit, et volutpat eros dui et ante. Quisque ultricies mi nec leo ultricies mollis. Vivamus egestas volutpat lacinia. Quisque pharetra eleifend efficitur.
Position
To set the modal position on the page you can use the Position parameter.

Draggable
The Draggable parameter of the BitModal allows users to move the modal around the screen.





Using custom drag element.

FullSize
The FullSize parameter of the BitModal allows the modal to be full-screen.

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
AutoToggleScroll bool false Enables the auto scrollbar toggle behavior of the Modal.
AbsolutePosition bool false When true, the Modal will be positioned absolute instead of fixed.
Blocking bool false Whether the Modal can be 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.
DragElementSelector string? null The CSS selector of the drag element. by default the Modal container is the drag element.
Draggable bool false Whether the Modal can be dragged around.
FullHeight bool false Makes the Modal height 100% of its parent container.
FullSize bool false Makes the Modal width and 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). If this is set, it will override the ARIA role determined by Blocking and Modeless.
IsOpen bool false Whether the Modal is displayed.
Modeless bool false Whether the Modal should be modeless (e.g. not dismiss when focusing/clicking outside of the Modal). if true: Blocking is ignored, there will be no overlay.
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.
Position BitPosition? null Position of the Modal on the screen.
ScrollerSelector string body Set the element selector for which the Modal disables its scroll if applicable.
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 The aria-label of the control for the benefit of screen readers.
Class string? null Custom CSS class for the root element of the component.
Dir BitDir? null Determines the component direction.
HtmlAttributes Dictionary<string, object> new Dictionary<string, object>() Capture and render additional attributes in addition to the component's parameters.
Id string? null Custom id attribute for the root element. if null the UniqueId will be used instead.
IsEnabled bool true Whether or not the component is enabled.
Style string? null Custom CSS style for the root element of the component.
Visibility BitVisibility BitVisibility.Visible Whether the component is visible, hidden or collapsed.
BitComponentBase public members
Name
Type
Default value
Description
UniqueId Guid Guid.NewGuid() The readonly unique id of the root element. it will be assigned to a new Guid at component instance construction.
RootElement ElementReference The ElementReference of the root element.
BitPosition enum
Name
Value
Description
Center 0
TopLeft 1
TopCenter 2
TopRight 3
CenterLeft 4
CenterRight 5
BottomLeft 6
BottomCenter 7
BottomRight 8
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.
  • On this page