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  @onclick="() => modal.Open()">Modal!</button>

@code {

private BlazorTaskItems.Pages.Modal modal { get; set; }

}

Component

<div  tabindex="-1" role="dialog" style="display:@modalDisplay; overflow-y: auto;">
    <div  role="document">
        <div >
            <div >
                <h5 >@Title</h5>
                <button type="button"  data-dismiss="modal" aria-label="Close" @onclick="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div >
                @Body
            </div>
            <div >
                @Footer
            </div>
        </div>
    </div>
</div>

@if (showBackdrop)
{
        <div ></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;
    }
}

CodePudding user response：

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.