如何在 R Shiny 中有选择地更改模态背景

Question

我有两个模态框。当第一个打开时，背景应该是灰色的，这是默认的。但这不应该发生在第二个身上。代码是：

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)

css代码应该连接到第二个模态对话框的id，但是函数中不能包含id 'modalDialog'。

关于如何将 css 代码选择性地仅应用于第二个模态的任何想法？

Answer 1

您可以添加 JS 代码以在 modalDialog 之后使用 tags$script 显示第二个模态后隐藏背景。

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)

如何在 R Shiny 中有选择地更改模态背景

How to selective change modal backdrop in R Shiny

r

shiny

modal-dialog

bootstrap-modal