ModalBackdrop in 0.9.3 buggy?

[NeoCoderMatrix86]

Hello,

I updated to 0.9.3 and use several modals. Since the Backdrop is there no more, I just removed it. But the current implementation seems to have bugs:

Code example:

<Modal @ref="modalTrackEdit">
    <ModalContent Centered="true">
        <ModalHeader>
            <ModalTitle>@localizer["Edit track details"]</ModalTitle>
            <CloseButton Clicked="() => modalTrackEdit.Hide()" />
        </ModalHeader>
        <ModalBody>
[....]
        </ModalBody>
        <ModalFooter>
            <Button Color="Color.Primary" Clicked="EditTrackModalSaveClicked">@localizer["Save"]</Button>
            <Button Color="Color.Secondary" Clicked="() => modalTrackEdit.Hide()">@localizer["Abort"]</Button>
        </ModalFooter>
    </ModalContent>
</Modal>

Or am I using it wrong?

[stsrki]

It's not a bug. In fact, the way how it was previously working was wrong. Previously we placed a modal backdrop inside of the modal element, which according to Bootstrap specs is wrong. And also with vanilla Bootstrap nested modals are not supported.

Quote from their docs: https://getbootstrap.com/docs/4.6/components/modal/

Bootstrap only supports one modal window at a time. Nested modals aren’t supported as we believe them to be poor user experiences.

[NeoCoderMatrix86]

Well, basically correct. But I'm NOT using 2 ore more modals at a time. The highlighted areas are <Accordion> and <Card>. The whole code can be seen here: https://github.com/NeoCoderMatrix86/AudioCuesheetEditor/blob/%23149-Switch-localizer-to-Blazorise/AudioCuesheetEditor/Pages/Index.razor and https://github.com/NeoCoderMatrix86/AudioCuesheetEditor/blob/%23149-Switch-localizer-to-Blazorise/AudioCuesheetEditor/Shared/AudioPlayer.razor

[stsrki]

Did you clear the cache? Ctrl+F5?

[NeoCoderMatrix86]

Ok, my fault, shame on me. Thanks for the support 👍

[stsrki]

Maybe, just as a workaround you can manually add a backdrop and disable ShowBackdrop.

<Modal @ref="modalRef" ShowBackdrop="false">
    <div class="modal-backdrop"></div>
    <ModalContent Size="@modalSize" Centered="@centered">
        <ModalHeader>
            <ModalTitle>
                <Icon Name="IconName.Edit" />
                Employee edit
            </ModalTitle>
            <CloseButton />
        </ModalHeader>
        <ModalBody MaxHeight="@maxHeight">
            <Field>
                <FieldLabel>Name</FieldLabel>
                <TextEdit Autofocus="true" Placeholder="Enter name..." />
            </Field>
            <Field>
                <FieldLabel>Surname</FieldLabel>
                <TextEdit Placeholder="Enter surname..." />
            </Field>
            <Field>
                <FieldLabel>Date of birth</FieldLabel>
                <DateEdit TValue="DateTime?" Placeholder="Pick a date" />
            </Field>
            <Field>
                <Button Color="Color.Primary" Clicked="@ShowModal2">Show second modal</Button>
            </Field>
        </ModalBody>
        <ModalFooter>
            <Button Color="Color.Secondary" Clicked="@HideModal">Close</Button>
            <Button Color="Color.Primary" Clicked="@HideModal">Save Changes</Button>
        </ModalFooter>
    </ModalContent>
</Modal>

also add:

.modal-backdrop{
  z-index: -1;
  opacity: .3;
}