ModalDialog.razor


<style>
    #myModal{
	    display:block;
	    background-color: rgba(10,10,10,.7);
    }
</style>

<div class="modal fade show" id="myModal" aria-modal="true" role="dialog">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title">@Title</h4>
				<button type="button" class="close" aria-label="Close" @onclick="@ModalCancel">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
				<p>@Text</p>
			</div>
			<div class="modal-footer">
				@switch (DialogType)
				{
					case ModalDialogType.OkCancel:
						<button type="button" class="btn" @onclick="@ModalCancel">Cancel</button>
						<button type="button" class="btn btn-primary" @onclick=@ModalOk>OK</button>
						break;
					case ModalDialogType.DeleteCancel:
						<button type="button" class="btn" @onclick="@ModalCancel">Cancel</button>
						<button type="button" class="btn btn-danger" @onclick=@ModalOk>Delete</button>
						break;
					case ModalDialogType.YesNo:
						<button type="button" class="btn" @onclick="@ModalCancel">No</button>
						<button type="button" class="btn btn-primary" @onclick=@ModalOk>Yes</button>
						break;
					default:
						<button type="button" class="btn btn-primary" @onclick=@ModalOk>OK</button>
						break;
				}
			</div>
		</div>
	</div>
</div>

@code {
	[Parameter] public string Title { get; set; }
	[Parameter] public string Text { get; set; }
	[Parameter] public ModalDialogType DialogType { get; set; }
	[Parameter] public EventCallback<bool> OnClose { get; set; }

	public enum ModalDialogType
	{
		Ok,
		OkCancel,
		DeleteCancel,
		YesNo
	}

	private Task ModalCancel()
	{
		return OnClose.InvokeAsync(false);
	}

	private Task ModalOk()
	{
		return OnClose.InvokeAsync(true);
	}
}