-
-
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; | |
| } | |
| } |
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 so much, helped me easily