es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo cambiar selectivamente el fondo del modal en R Shiny

16 Jul, 2023 Programación

Tengo dos modales. Cuando se abre el primero, el fondo debe desvanecerse en gris, como es predeterminado. Pero esto no debería suceder con el segundo. El código es:

library(shiny)

ui <- fluidPage(
  tags$style(type = 'text/css', '.modal-backdrop { display: none }'),

  actionButton('modal1', 'Modal1'),
  actionButton('modal2', 'Modal2'),
)

server <- function(input, output) {

  observeEvent(input$modal1,
    showModal(modalDialog(title = "Modal1"))
  )

  observeEvent(input$modal2,
    showModal(modalDialog(title = "Modal2"))
  )
}

shinyApp(ui = ui, server = server)

El código CSS debería estar conectado al id del segundo diálogo modal, pero no es posible incluir un id en la función ‘modalDialog’.

¿Alguna idea sobre cómo aplicar el código CSS selectivamente solo al segundo modal?

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Una posible solución es agregar una clase única al segundo diálogo modal y utilizar esa clase en el código CSS para ocultar selectivamente el fondo del modal.

    Aquí tienes un ejemplo:

    library(shiny)

ui <- fluidPage(
  tags$style(type = 'text/css', '.modal-backdrop.hide-backdrop { display: none }'),

  actionButton('modal1', 'Modal1'),
  actionButton('modal2', 'Modal2'),
)

server <- function(input, output) {

  observeEvent(input$modal1,
    showModal(modalDialog(title = "Modal1"))
  )

  observeEvent(input$modal2,
    showModal(modalDialog(title = "Modal2", class = "no-backdrop"))
  )

}

shinyApp(ui = ui, server = server)

    En este código, agregamos el argumento class = "no-backdrop" en la llamada a la función modalDialog del segundo diálogo modal. Luego, en el código CSS, utilizamos .modal-backdrop.hide-backdrop para apuntar al fondo solo cuando el modal tiene la clase no-backdrop.

    Ten en cuenta que tuvimos que usar hide-backdrop en lugar de no-backdrop en el código CSS porque class = "no-backdrop" no se agregó al fondo del modal en sí, sino al contenedor modal principal.

Comments are closed.