CODEWITHSUNDEEP
rshinymodal-dialogbootstrap-modal
WJH
WJH

Reputation: 581

How to selective change modal backdrop in R Shiny

I have two modals. When the first is opened, the background should be grayed out, as is default. But this should not happen with the second one. The code is:

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)

The css code should be connected to the id of the second modal dialog, but it is not possible to include an id in the function 'modalDialog'.

Any ideas about how to apply the css code selectively to only the second modal?

Upvotes: 1

Views: 517

Answers (1)

Geovany
Geovany

Reputation: 5687

You can add JS code to hide the backdrop after showing the second modal using tags$script just after modalDialog.

library(shiny)

ui <- fluidPage(
  actionButton('modal1', 'Modal1'),
  actionButton('modal2', 'Modal2'),
)

server <- function(input, output) {
  
  observeEvent(input$modal1,
    showModal(modalDialog(title = "Modal1"))
  )
  
  observeEvent(input$modal2, {
    showModal(
      list(
        modalDialog(title = "Modal2"),
        tags$script("$('.modal-backdrop').css('display', 'none');")
      )
    )
  })
}

shinyApp(ui = ui, server = server)

Upvotes: 4

Related Questions