-
-
Save conficient/ba98d1662c659e170ec16650acea05c8 to your computer and use it in GitHub Desktop.
| <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">×</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; | |
| } | |
| } |
Glad it helped @scott-scott
Just noticed it's quite old and the syntax needs fixing
Updated for latest Blazor syntax - https://blazorfiddle.com/s/91rhlt8z fiddle example of working code
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)
Thank you so much! Easiest solution out there.. This is helping my final project at university!
Perfect,
thank you for sharing, so simple and works great