【解決方法】バックグラウンドでブートストラップ モーダル表示を発行しますか?

私は .NET core 7 で blazor アプリに取り組んでいます。 編集ボタンをクリックすると、ブートストラップのモーダル表示がアクティブにならないという問題に直面します。

ブートストラップ モーダルを使用してデータを編集しますが、編集ボタン モーダル ブートストラップ表示をクリックするとアクティブではなく、データを編集できません。

ブートストラップモーダルをアクティブにしてバックグラウンドで表示しないようにする方法。

CSS を使用していないか、ブートストラップ クラスがブートストラップ モーダルの動作をオーバーライドします

so モーダル ブートストラップを有効にしてバックグラウンドで表示しないようにする方法。

以下のように、より明確にする必要がある私の結果：

私が試したこと：

<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" />
							   
								</div>
							</div>
							<div class="form-group row">
								<label for="example-text-input" class="col-3 col-form-label">Server Name</label>
			   
								<div class="col-9">
								<input type="hidden"  class="form-control" @bind="@sn.ServerID" />
								<select class="form-select" @bind="@sn.ServerID">
									<option value="0">--Select--</option>
									@foreach (var serverId in ServerName)
									{
										<option value="@serverId.serverID">
											@serverId.server_Name
										</option>
									}

								</select>
								</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>
</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">
	Add Database
</button>