Recabamos por diferentes foros para así mostrarte la respuesta para tu inquietud, si continúas con preguntas déjanos tu inquietud y te contestaremos con gusto.
Solución:
Probablemente haya una mejor manera de hacer esto, pero aquí hay un ejemplo de trabajo para comenzar:
Página:
@page "/modal-test"
Componente:
@if (ShowBackdrop)
@code
public Guid Guid = Guid.NewGuid();
public string ModalDisplay = "none;";
public string ModalClass = "";
public bool ShowBackdrop = false;
public void Open()
ModalDisplay = "block;";
ModalClass = "Show";
ShowBackdrop = true;
StateHasChanged();
public void Close()
ModalDisplay = "none";
ModalClass = "";
ShowBackdrop = false;
StateHasChanged();
Otra opción para hacer esto sería usar JSInterop para llamar $('#modalId').modal()
Puede hacer que cada versión del componente tenga una identificación única haciendo algo como esto:
Sobre la base de la respuesta de Kyle, este es mi primer experimento con Blazor: Hacer que el componente de diálogo modal tome cualquier marcado o componente.
Maquinilla de afeitar modal
@if (showBackdrop)
@code
[Parameter]
public RenderFragment Title get; set;
[Parameter]
public RenderFragment Body get; set;
[Parameter]
public RenderFragment Footer get; set;
private string modalDisplay = "none;";
private string modalClass = "";
private bool showBackdrop = false;
public void Open()
modalDisplay = "block;";
modalClass = "show";
showBackdrop = true;
public void Close()
modalDisplay = "none";
modalClass = "";
showBackdrop = false;
Index.razor
@page "/"
Hello, world!
Welcome to your new app.
This is a <em>Title!</em>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Omnes enim iucundum motum, quo sensus hilaretur.
Quis istud possit, inquit, negare?
Ego vero isti, inquam, permitto. Duo Reges: constructio interrete.
- Stoici scilicet.
- An hoc usque quaque, aliter in vita?
- Erat enim Polemonis.
- Quod cum accidisset ut alter alterum necopinato videremus, surrexit statim.
@code
private Modal modal get; set;
Además, basándose en la respuesta de Kyle, puede mantener el efecto de desvanecimiento de arranque si coloca un breve retraso entre la visualización y los ajustes de clase.
@code
...
public async Task OpenModal()
ModalDisplay = "block;";
await Task.Delay(100);//Delay allows bootstrap to perform nice fade animation
ModalClass = "show";
StateHasChanged();
public async Task CloseModal()
ModalClass = "";
await Task.Delay(250);
ModalDisplay = "none;";
StateHasChanged();
También apliqué las variables ModalClass y ModalDisplay al elemento de fondo.
Creo que bootstrap puede identificar mejor el cambio de estado que activa la animación de esta manera
Si para ti ha sido de provecho nuestro post, agradeceríamos que lo compartas con el resto entusiastas de la programación de esta manera nos ayudas a extender nuestra información.