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;
    }
}

Great example, thanks.

@conficient I improved a little bit by changing rows 9 and 10 for:

    <div class="modal fade show" style="display:block" aria-modal="true" role="dialog" @onclick="@ModalCancel">
        <div class="modal-dialog" @onclick:stopPropagation="true">

This way, The modal will close if you click outside it. I also removed de id attribute.

Thanks for the contribution, @FelipeCostaGualberto !

Excellent job! This was the cleanest and simplest way to 'skin this cat' I have seen. Well done and works great in my server-side Blazor project.

Happy to help @REMjn832

Thank you for this, helped me a lot.

Thank you so much, helped me easily

Here's my minor contribution

<div class="modal fade show" style="display:block; background-color: rgba(10,10,10,.8);" aria-modal="true" role="dialog">

https://blazorfiddle.com/s/0dbkxpdu -- Fiddle Example of darkened background

This will darken everything outside of the modal itself. It a nice touch to make sure the user focuses on the modal from a UI/UX perspective.
Also, feel free to experiment with different background colors/opacities!

Happy Blazoring!

Edit: Added Fiddle example!

Many thanks for your contribution, @aalshibily

Thank you for this, helped me.

Thank you for this, helped me.

Glad to hear it! :)

AWESOME SOLUTION!
Thank you @conficient, your code guided me in the right direction.
I can't contribute directly to your code, but I can show my implementation and hope to contribute to the discussion.
Here's the full code (thanks @FelipeCostaGualberto and @aalshibily, your changes were also implemented)

https://blazorfiddle.com/s/hr4id1vk

Thank you so much! Easiest solution out there.. This is helping my final project at university!

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>.