📄️ Size
The width of a modal can be configured using the Size option. Blazored Modal has a range of built-in sizes as well as the ability to define a custom size.
📄️ Position
Modals are shown in the center of the screen near the top of the viewport. This can be customised via the Position option using the ModalPosition enum. The options available are:
📄️ Close Button
By default, modals will display a close button in the top right corner. However, if you prefer, you can remove the close button using the HideCloseButton option.
📄️ Hide Header
When displaying a modal, a header is rendered showing the title of the modal and the close button. However, if you're planning to render your own header as part of the component being displayed, or you just don't want a header, you can turn it off.
📄️ Background Click
By default, a modal is cancelled if the user clicks anywhere outside the modal. This behavior can be disabled by setting DisableBackgroundCancel option to true.
📄️ Focus Trap
Blazored Modal comes with a built-in focus trap. Focus traps are an important feature for accessability as they stop focus dropping behind the modal when pressing the tab key.