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

This comment has been minimized.

Copy link

scott-scott commented Feb 14, 2020

thank you for sharing, so simple and works great

@conficient

This comment has been minimized.

Copy link
Owner Author

conficient commented Feb 18, 2020

Glad it helped @scott-scott

@conficient

This comment has been minimized.

Copy link
Owner Author

conficient commented Feb 18, 2020

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

@conficient

This comment has been minimized.

Copy link
Owner Author

conficient commented Feb 18, 2020

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.