Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Blazor Modal Dialog with no JS interop
<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;
}
}
@scott-scott
Copy link

scott-scott commented Feb 14, 2020

thank you for sharing, so simple and works great

@conficient
Copy link
Author

conficient commented Feb 18, 2020

Glad it helped @scott-scott

@conficient
Copy link
Author

conficient commented Feb 18, 2020

Just noticed it's quite old and the syntax needs fixing

@conficient
Copy link
Author

conficient commented Feb 18, 2020

Updated for latest Blazor syntax - https://blazorfiddle.com/s/91rhlt8z fiddle example of working code

@FelipeCostaGualberto
Copy link

FelipeCostaGualberto commented Jun 12, 2020

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.

@conficient
Copy link
Author

conficient commented Jun 14, 2020

Thanks for the contribution, @FelipeCostaGualberto !

@REMjn832
Copy link

REMjn832 commented Jul 9, 2020

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.

@conficient
Copy link
Author

conficient commented Jul 15, 2020

Happy to help @REMjn832

@VGsss
Copy link

VGsss commented Sep 9, 2020

Thank you for this, helped me a lot.

@thefifty
Copy link

thefifty commented Oct 27, 2020

Thank you so much, helped me easily

@aalshibily
Copy link

aalshibily commented Nov 25, 2020

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!

@conficient
Copy link
Author

conficient commented Nov 25, 2020

Many thanks for your contribution, @aalshibily

@natae
Copy link

natae commented Feb 8, 2021

Thank you for this, helped me.

@conficient
Copy link
Author

conficient commented Feb 8, 2021

Thank you for this, helped me.

Glad to hear it! :)

@garciaarthur
Copy link

garciaarthur commented Feb 16, 2021

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

@CuvinStefanCristian
Copy link

CuvinStefanCristian commented Jun 1, 2021

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

@Adomovic
Copy link

Adomovic commented Aug 1, 2021

Perfect,

@conficient
Copy link
Author

conficient commented Oct 5, 2021

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment