Click here to Skip to main content
15,844,477 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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

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

my result I need for more clear as below :

What I have tried:

HTML
<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>
Posted
Updated 14-Mar-23 16:37pm
v2

1 solution

I'm reading the documentation Modal · Bootstrap v5.0[^] and it mentions:
Quote:
Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.

You will need to call the external JavaScipt or look at their code and mimic what they are doing in your code + maybe a sprinkle of JavaScript (I have not looked).
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900