如何实现点击多个Div打开同一Shiny Modal对话框？

其实这个需求很容易实现，shinyjs的onclick函数支持同时给多个元素绑定点击事件，咱们有两种直观的方式来做：

方法一：直接指定多个元素ID #

直接修改server端onclick的第一个参数，把单个ID改成包含Div1和Div2的向量就行，这样两个元素都会触发同一个弹窗逻辑。

修改后的完整代码如下：

library(shiny)
library(shinyjs) # 别忘了加载shinyjs包！

shinyApp(
  ui = fluidPage(
    useShinyjs(), # 初始化shinyjs
    div(id = "Div1", style = "height: 100px; width: 100px; background-color: red;"),
    div(id = "Div2", style = "height: 100px; width: 100px; background-color: blue;")
  ),
  server = function(input, output) {
    # 用向量传入两个ID，点击任意一个都会触发弹窗
    onclick(c('Div1', 'Div2'), showModal(modalDialog(
      div(id = "Div3", style = "height: 100px; width: 100px; background-color: black;", tableOutput("tab")),
    )))
    
    # 给表格添加测试数据，避免弹窗里的表格为空
    output$tab <- renderTable({
      data.frame(序号 = c(1,2), 内容 = c("测试项1","测试项2"))
    })
  }
)

方法二：使用CSS类选择器（更适合扩展） #

如果以后可能要给更多元素添加触发弹窗的功能，推荐给这些元素加同一个CSS类，然后绑定类选择器，这样不用每次都修改onclick的参数。

修改后的代码：

library(shiny)
library(shinyjs)

shinyApp(
  ui = fluidPage(
    useShinyjs(),
    # 给两个div都加上class="modal-trigger"
    div(id = "Div1", class = "modal-trigger", style = "height: 100px; width: 100px; background-color: red;"),
    div(id = "Div2", class = "modal-trigger", style = "height: 100px; width: 100px; background-color: blue;")
  ),
  server = function(input, output) {
    # 绑定类选择器，所有带modal-trigger类的元素点击都会触发弹窗
    onclick('.modal-trigger', showModal(modalDialog(
      div(id = "Div3", style = "height: 100px; width: 100px; background-color: black;", tableOutput("tab")),
    )))
    
    output$tab <- renderTable({
      data.frame(序号 = c(1,2), 内容 = c("测试项1","测试项2"))
    })
  }
)

补充说明 #

• 注意要确保加载了shinyjs包，原来的代码里没写library(shinyjs)，实际运行时会报错，我已经补上了。
• 我给tableOutput("tab")加了测试数据，不然弹窗里的表格是空的，你可以根据自己的需求替换成实际数据。

内容的提问来源于stack exchange，提问作者Bogaso