How to pop up a modal when clicking on a NavLink item in syncfusion blazor?

Question

I'm creating a menu with 6 NavLink menu items, the last of that item must work as a button that pop ups a modal if the user is sure whether to sign out or not but somehow I cant pop up a modal using the @onclick function..?

HTML:

<li class="nav-item px-3" id="li6">
        <NavLink class="nav-link" @onclick="OnClicked">
            <span class="oi oi-list-rich" aria-hidden="true"></span> Sign Out
        </NavLink>
</li>

C#:

//Modal
private bool IsVisible { get; set; } = true;

private void OnClicked()
{
    this.IsVisible = true;
}

private void OnOverlayclick(object arg)
{
    this.IsVisible = false;
}

Modal itself:

<SfDialog @bind-Visible="@IsVisible" Width="250px" IsModal="true">
    <DialogEvents OnOverlayClick="OnOverlayclick">
    </DialogEvents>
    <DialogTemplates>
        <Content> This is a modal dialog</Content>
    </DialogTemplates>
</SfDialog>

Can anybody see what im doing wrong? Hope someone can help! Thank you!

Answer 1

Niels, I tried to create a razor page with a shared code snippet. The modal shows properly on the "Sign-Out" click. As well as, the modal hides while clicking on the overlay. if possible, share your razor page.

@using Syncfusion.Blazor.Popups
<div>
    <div id="container"></div>
    <ul>
        <li class="nav-item px-3" id="li6">
            <NavLink class="nav-link" @onclick="OnClicked">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Sign Out
            </NavLink>
        </li>
    </ul>

    <SfDialog @bind-Visible="@IsVisible" Width="250px" IsModal="true">
        <DialogEvents OnOverlayClick="OnOverlayclick">
        </DialogEvents>
        <DialogTemplates>
            <Content> This is a modal dialog</Content>
        </DialogTemplates>
    </SfDialog>
</div>

@code{
    //Modal
    private bool IsVisible { get; set; } = true;

    private void OnClicked()
    {
        this.IsVisible = true;
    }

    private void OnOverlayclick(object arg)
    {
        this.IsVisible = false;
    }
}```