使用shiny的modalDialog与networkD3的sankeyNetwork时弹窗不显示求助

我之前也碰到过这个棘手的问题，本质原因是networkD3生成的sankey图SVG元素的层级设置会覆盖modal弹窗，导致弹窗被灰色遮罩挡住，只能看到遮罩却看不到弹窗内容。

问题复现代码 #

library(shiny)
library(networkD3)
server <- function(input, output, session) {
  observeEvent(input$show_modal,{
    showModal(modalDialog(
      title = NULL,
      size = "m",
      h4("Test Window"),
      footer = NULL,
      easyClose = T
    ))
  })
  output$sankey <- renderSankeyNetwork({
    nodes<-data.frame(
      name=paste0(rep("opt",9),seq(1,9)),
      stringsAsFactors = F)
    links<-data.frame(
      source=c(0,0,0,1,1,2,2,3,4,4,5,6),
      target=c(4,5,6,5,6,4,6,6,7,8,7,8),
      value=c(2,3,5,1,2,3,1,6,1,3,7,4))
    quest<-list(nodes=nodes, links=links)
    sankeyNetwork(Links = quest$links, Nodes = quest$nodes,
                  Source = "source", Target = "target",
                  Value = "value", NodeID = "name", units = "opt",
                  fontSize = 16, nodeWidth = 30, iterations = 2, sinksRight = T)
  })
  output$show_sankey<-renderUI({
    if(input$show_sankeyNetwork_box)
      sankeyNetworkOutput('sankey')
  })
}
ui <- fluidPage(titlePanel("Modaldialog + sankeyNetwork (networkD3) Problem"),
                sidebarLayout(
                  sidebarPanel(
                    actionButton("show_modal", "Show modal"),
                    checkboxInput('show_sankeyNetwork_box', "Show sankeyNetwork", value = F)),
                  mainPanel(
                    uiOutput('show_sankey'))
                ))
shinyApp(ui = ui, server = server)

解决方案：提升modal的层级优先级 #

最直接有效的修复方式是给modal弹窗设置更高的z-index样式，确保它能显示在sankey图之上，这里提供两种实现方式：

方式1：针对单个modal添加样式

修改showModal中的modalDialog部分，加入自定义样式强制提升modal层级：

observeEvent(input$show_modal,{
  showModal(modalDialog(
    title = NULL,
    size = "m",
    h4("Test Window"),
    footer = NULL,
    easyClose = T,
    # 强制提升modal的层级优先级
    tags$style(".modal {z-index: 10000 !important;}")
  ))
})

方式2：全局添加样式（推荐）

如果你的应用中有多个modal弹窗，可以在UI的头部添加全局样式，一次性解决所有modal的层级问题：

ui <- fluidPage(
  titlePanel("Modaldialog + sankeyNetwork (networkD3) Problem"),
  # 全局设置modal的z-index，确保所有弹窗都能正常显示
  tags$head(tags$style(".modal {z-index: 10000 !important;}")),
  sidebarLayout(
    sidebarPanel(
      actionButton("show_modal", "Show modal"),
      checkboxInput('show_sankeyNetwork_box', "Show sankeyNetwork", value = F)
    ),
    mainPanel(
      uiOutput('show_sankey')
    )
  )
)

验证效果 #

修改完成后，无论sankeyNetwork是否处于显示状态，点击"Show modal"按钮都能正常弹出弹窗，不会再被灰色遮罩遮挡。

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