Bootstrap Modal Popup using Blazor Asp.Net Core - asp.net-core

Question

I am working on blazor using asp.net core 6.0 I am facing issue to open bootstrap popup modal. When I click the modal button it doesn't show any modal popup. Also check for inspect elements there is no sign of modal html. I have added bootstrap css on layout. Reference Url is attached.
Here is the link
Here is my implementation
Page
<BlazorTaskItems.Pages.Modal #ref="modal"></BlazorTaskItems.Pages.Modal>
<button class="btn btn-primary" #onclick="() => modal.Open()">Modal!</button>
#code {
private BlazorTaskItems.Pages.Modal modal { get; set; }
}
Component
<div class="modal #modalClass" tabindex="-1" role="dialog" style="display:#modalDisplay; overflow-y: auto;">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">#Title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" #onclick="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
#Body
</div>
<div class="modal-footer">
#Footer
</div>
</div>
</div>
</div>
#if (showBackdrop)
{
<div class="modal-backdrop fade show"></div>
}
#code {
[Parameter]
public RenderFragment? Title { get; set; }
[Parameter]
public RenderFragment? Body { get; set; }
[Parameter]
public RenderFragment? Footer { get; set; }
public Guid Guid = Guid.NewGuid();
private string modalDisplay = "none;";
private string modalClass = "";
private bool showBackdrop = false;
public void Open()
{
modalDisplay = "block;";
modalClass = "show";
showBackdrop = true;
}
public void Close()
{
modalDisplay = "none";
modalClass = "";
showBackdrop = false;
}
}

Answer 1

You need to call StateHasChanged(); (which happens to be in your linked code...)
public void Open()
{
modalDisplay = "block;";
modalClass = "show";
showBackdrop = true;
StateHasChanged();
}
Make sure to do this in the Close() method also.