卡片全屏展开时modalDialog显示于后方的解决方法问询

这个问题是因为全屏展开的卡片z-index层级高于Shiny默认模态框的层级导致的。可以通过自定义CSS提高模态框及其背景遮罩的层级，让模态框显示在全屏卡片前方。

修改后的代码如下：

library(bslib)
library(shiny)

ui <- page_navbar(
  tags$style(
    HTML("
      /* 提高模态框背景遮罩的层级 */
      .modal-backdrop {
        z-index: 1065 !important;
      }
      /* 提高模态框本身的层级 */
      .modal {
        z-index: 1070 !important;
      }
    ")
  ),
  card(actionLink("dialog_link", label = "Open Dialog"),
       full_screen = TRUE)
)

server <- function(input, output, session) {
  
  observeEvent(input$dialog_link, {
    showModal(modalDialog(
      title = "My Dialog Box",
      easyClose = TRUE,
    ))
  })
  
}

shinyApp(ui, server)

说明 #

• 全屏卡片的默认z-index为1060，因此将模态框背景设为1065、模态框设为1070，确保层级高于全屏卡片。
• 使用!important强制覆盖默认样式，避免被bslib的内置样式优先级覆盖。

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