Search the docs

A Header template holds anything - here a search box under the title. The footer stays at the bottom while the body scrolls, and lays its actions out the way the theme does. ``` ```csharp private bool isOpenCustomContent; private bool isOpenHeaderText; private bool isOpenHeaderTemplate; private bool isOpenFooter; ``` \n**Dismissal**: ```razor Blocking Blocking + NoDismissOnEscape CanClose Type something, then try to close: the Modal stays open until the field is cleared or the changes are discarded. Discard changes ``` ```csharp private bool isOpenBlocking; private bool isOpenNoEscape; private bool isOpenCanClose; private string? editorName; private void OpenCanClose() { editorName = null; isOpenCanClose = true; } private Task CanCloseEditor() => Task.FromResult(string.IsNullOrEmpty(editorName)); private void DiscardEditor() { editorName = null; isOpenCanClose = false; } ``` \n**Focus management**: ```razor Default focus data-autofocus NoAutoFocus ``` ```csharp private bool isOpenFocus; private bool isOpenAutoFocus; private bool isOpenNoFocus; private readonly Dictionary autoFocusAttributes = new() { { "data-autofocus", true } }; ``` \n**Scroll lock**: ```razor Holds the page NoScrollLock AutoToggleScroll The overflow of the page is taken away while this Modal is open. ``` ```csharp private bool isOpenScrollLock; private bool isOpenNoScrollLock; private bool isOpenAutoToggleScroll; ``` \n**Overlay**: ```razor ModeFull Modeless Carry on with the page: this Modal holds neither the pointer, nor the keyboard, nor the scroll. ``` ```csharp private bool isOpenModeFull; private bool isOpenModeless; ``` \n**Position**: ```razor

Top Left Top Center Top Right

Center Left Center Center Right

Bottom Left Bottom Center Bottom Right

This Modal is placed by the Position parameter.

AbsolutePosition AbsolutePosition + AutoToggleScroll
``` ```csharp private bool isOpenPosition; private BitPosition position = BitPosition.Center; private void OpenModalInPosition(BitPosition positionValue) { position = positionValue; isOpenPosition = true; } private bool isOpenAbsolute; private bool isOpenAbsoluteScroller; ``` \n**Draggable**: ```razor Draggable DragElementSelector Press anywhere on this Modal and drag it around.

Only the bar drags this Modal, so this text can still be selected. ``` ```csharp private bool isOpenDraggable; private bool isOpenDragHandle; ``` \n**Accessibility**: ```razor Named by its header TitleAriaId Alert dialog A screen reader announces this dialog as "Privacy settings". ``` ```csharp private bool isOpenAutoNamed; private bool isOpenLabelled; private bool isOpenAlert; ``` \n**Keep mounted**: ```razor KeepMounted Built again each time ``` ```csharp private bool isOpenKeptMounted; private bool isOpenNotKeptMounted; ``` \n**Events**: ```razor Open Modal

Opened? [@isOpened]

Dismissed? [@isDismissed]

Overlay clicked? [@isOverlayClicked]

Escape pressed? [@isEscapePressed]

``` ```csharp private bool isEventsOpen; private bool isOpened; private int openedVersion; private bool isDismissed; private bool isOverlayClicked; private bool isEscapePressed; private async Task HandleOnOpen() { var version = ++openedVersion; isOpened = true; await Task.Delay(3000); if (version != openedVersion) return; isOpened = false; StateHasChanged(); } private async Task HandleOnDismiss() { isDismissed = true; await Task.Delay(3000); isDismissed = false; } private async Task HandleOnOverlayClick() { isOverlayClicked = true; await Task.Delay(2000); isOverlayClicked = false; } private async Task HandleOnEscapeKeyDown() { isEscapePressed = true; await Task.Delay(2000); isEscapePressed = false; } ``` \n**Programmatic control**: ```razor Open Toggle ``` ```csharp private BitModal refModal = default!; ``` \n**Nested modals**: ```razor Open Modal ``` ```csharp private bool isOpenOuter; private bool isOpenInner; private void HandleNestedDelete() { isOpenInner = false; isOpenOuter = false; } ``` \n**Cascading parameters**: ```razor Takes the cascade Its own position Outside the cascade Top center, dimmed page, close button and a 26rem cap - all from BitParams. This one keeps its own Position and takes the rest from BitParams. ``` ```csharp private bool isOpenCascaded; private bool isOpenCascadedOwn; private bool isOpenUncascaded; private readonly BitModalParams[] modalParams = [ new() { ModeFull = true, ShowCloseButton = true, MaxWidth = "26rem", Position = BitPosition.TopCenter, } ]; ``` \n**External Icons**: ```razor Open Modal The close button of this Modal wears a FontAwesome icon. ``` ```csharp private bool isOpenExternalIcon; ``` \n**Style & Class**: ```razor Style Class Styles Classes The overlay, the content and the header each take a style of their own. The overlay, the header container, the body and the footer each take a class of their own.

CSS variables Fill, text, accent, corners, padding, header type, blurred overlay, cap and offset all come from variables. ``` ```csharp private bool isOpenStyle; private bool isOpenClass; private bool isOpenStyles; private bool isOpenClasses; private bool isOpenCssVars; ``` \n**RTL**: ```razor

باز کردن مُدال

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. ``` ```csharp private bool isOpenRtl; ```