Blazor Modal Dialog with no JS interop

BlazorModalExample.razor

<button class="btn btn-primary" @onclick="@ModalShow">Show Dialog!</button>
@if (showModal)
{
    <div class="modal fade show" id="myModal" style="display:block" aria-modal="true" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">

                <!-- Modal Header -->
                <div class="modal-header">
                    <h4 class="modal-title">Confirm action</h4>
                    <button type="button" class="close" @onclick="@ModalCancel">&times;</button>
                </div>

                <!-- Modal body -->
                <div class="modal-body">
                    <p>This is the modal content!</p>
                </div>

                <!-- Modal footer -->
                <div class="modal-footer">
                    <button type="button" class="btn" @onclick="@ModalCancel">Cancel</button>
                    <button type="button" class="btn btn-danger" @onclick=@ModalOk>Delete</button>
                </div>

            </div>
        </div>
    </div>
}
<hr />
@code
{
    bool showModal = false;

    void ModalShow() => showModal = true;
    void ModalCancel() => showModal = false;
    void ModalOk()
    {
        Console.WriteLine("Modal ok");
        showModal = false;
    }
}

Perfect,

Would depend on the nature of your requirement, but do you need two? You can achieve this by re-using the same modal and changing the content. Try this example: https://blazorfiddle.com/s/fcp3n1qd It shows "step 1" when opened, you click the blue button and see step 2.

…

________________________________ From: patricknielsen25 ***@***.***> Sent: 04 October 2021 09:30 To: conficient ***@***.***> Cc: Howard Richards ***@***.***>; Mention ***@***.***> Subject: Re: conficient/BlazorModalExample.razor @patricknielsen25 commented on this gist.

________________________________ Thanks for this, super useful. If I'd like 2 windows, and the 1st window should close when the 2nd opens, how could this be implemented? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<https://gist.github.com/ba98d1662c659e170ec16650acea05c8#gistcomment-3915647>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AADO6XWPJAQL7BSYBJDSGBLUFFQ37ANCNFSM4KVODCVQ>.