Issue bootstrap modal display not active when edit data?

Question

I working on blazor app with .NET core 7 . I face issue bootstrap modal display not Active when click edit button .

I edit data using bootstrap modal but when click edit button modal bootstrap display not Active and can't edit data .

so How to allow bootstrap modal to be active and not displaying under background .

I'm not using any CSS or bootstrap classes override behavior of bootstrap modal .

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"
data-backdrop="false">
<div class="modal-dialog modal-lg modal-dialog-centered">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">
                @ModalTitle
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </h5>
        </div>
        <EditForm Model="@sn" OnValidSubmit="submit">
            <div class="modal-body">
                <div class="d-flex flex-row bd-highlight mb-3">
                    <div class="p-2 w-100 bd-highlight">
                        <div class="form-group row">
                            <input type="hidden" class="form-control" @bind="@sn.DBID" />
                        </div>
                        <div class="form-group row">
                            <label for="example-text-input" class="col-3 col-form-label">Database Name</label>
                            <div class="col-9">
                                <input type="text" class="form-control" @bind="@sn.DB_Name" />
                                <ValidationMessage For="@(() => sn.DB_Name)" style="color:red"></ValidationMessage>
                            </div>
                        </div>
                       
                        <div class="form-group row">
                            <label for="example-text-input" class="col-4 col-form-label">Database Owner
                                FileNo</label>
                            <div class="col-8">
                                <input type="text" class="form-control" @bind="@sn.DB_Owner_FileNo" />
                            </div>
                        </div>
                        <div class="form-group row">
                            <label for="example-text-input" class="col-4 col-form-label">Database Owner
                                FileName</label>
                            <div class="col-8">
                                <input type="text" class="form-control" @bind="@sn.DB_Owner_FileName" />
                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="input-group mb-3">
                                <div class="input-group-text">
                                    <InputCheckbox @bind-Value="@sn.IsActive" />
                                </div>
                                <label class="form-check-label" for="IsActive">IsActive?</label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </EditForm>
    </div>
</div>

and button call bootstrap modal as below :

 <button type="button" class="btn btn-primary pull-right" style="display: flex;direction: ltr;width:160px;" data-bs-toggle="modal" data-bs-target="#exampleModal" @onclick="AddClick">
                                            <span class="bi bi-plus-circle" style="margin-right: 5px;"></span>Add Database
                                        </button>

so How to allow modal bootstrap to be active and not display under background .

my result I need for more clear as below :

Answer 1

did you try bringing the form forward with z-index in the css? for a good explanation see https://developer.mozilla.org/en-US/docs/Web/CSS/z-index