I am currently working on a Blazor application with .NET Core 7. I am facing an issue where the Bootstrap modal does not display as active when clicking the edit button.
When trying to edit data using the Bootstrap modal, the modal does not display as active when the edit button is clicked, rendering it unable to edit the data.
So, how can I make the Bootstrap modal active and prevent it from displaying underneath the background without using any CSS or overriding Bootstrap classes?
<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>
<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 can I ensure that the Bootstrap modal is active and does not display underneath the background? The desired result for more clarity can be seen here.