如何在弹出 window 打开时保持背景元素可用

Question

我在 R Shiny 中使用弹出窗口 window，代码如下：

library(shiny)
library(shinyjqui)

ui = basicPage(
  actionButton("show", "Show modal dialog"),

  textAreaInput(
    inputId = 'textEditor', 
    label   = NULL, 
    value   = "R is a free software environment for statistical computing and graphics.",
    height  = "300",
    resize  = "none"
  )
)

server = function(input, output) 
{
  observeEvent(input$show, 
  {
    showModal(draggableModalDialog(
      title = "Add the following text in the box at the left:",
      "The R language is widely used among statisticians and data miners.",
  
      footer = tagList(
        actionButton("ok", "OK")
      )
    ))
  })

  observeEvent(input$ok, 
  {
    removeModal()
    print("OK") 
  })
}

shinyApp(ui = ui, server = server)

令我震惊的是，当弹出 window 打开时，您无法使用背景上的元素。整个背景都是灰色的。

在大多数情况下，这可能是正确的行为，但就我而言，我希望能够在弹出窗口 window 打开时编辑左侧 window 中的文本。

有可能做到这一点吗？如果可以，怎么做？

Answer 1

您正在尝试以不适合的方式使用模态对话框，因此您需要对其行为进行一些手动更改。要完全移除灰色背景并允许与背景中的所有内容进行交互，您需要解决三个问题：

您必须隐藏背景（灰色背景）本身。
可移动模态框有一个覆盖整个屏幕的父级覆盖层，以允许自由移动。此叠加层捕获所有指针事件并使其下方的所有内容都不可点击。
draggableModalDialog 元素具有属性 tabindex="-1"，这是一个 HTML 技巧，可防止与模式外的输入字段进行交互。请参阅 Github 上的 source。

问题 #1 和 #2 可以用一点点解决 CSS:

ui = basicPage(
  tags$head(tags$style(HTML("
    .modal-backdrop {  # hide backdrop
      display: none;
    }
    .modal {  # pass through clicks etc. on the overlay
      pointer-events: none;
    }
    .modal-dialog {  # do capture mouse events on the modal itself
      pointer-events: all;
    }"
  ))),

  [...]
)

对于问题 #3，您实际上需要修改 draggableModalDialog 函数。您可以复制粘贴原始定义并删除 tabindex 定义：

customDraggableModalDialog <- function(..., title = NULL,
                                 footer = shiny::modalButton("Dismiss"),
                                 size = c("m", "s", "l"),
                                 easyClose = FALSE, fade = TRUE) {
  size <- match.arg(size)
  cls <- if (fade) { "modal fade" } else { "modal" }
  shiny::div(
    id = "shiny-modal",
    class = cls,
    # tabindex = "-1", This line should be commented out or removed
    `data-backdrop` = if (!easyClose) { "static" } ,
    `data-keyboard` = if (!easyClose) { "false" } ,
    shiny::div(
      class = "modal-dialog",
      class = switch(size, s = "modal-sm", m = NULL, l = "modal-lg"),
      jqui_draggable(shiny::div(
        class = "modal-content",
        if (!is.null(title)) {
          shiny::div(
            class = "modal-header",
            shiny::tags$h4(class = "modal-title",  title)
          )
        },
        shiny::div(class = "modal-body", ...),
        if (!is.null(footer)) {
          shiny::div(class = "modal-footer", footer)
        }
      ))
    ),
    shiny::tags$script("$('#shiny-modal').modal().focus();")
  )
}

然后您可以将 draggableModalDialog 的使用替换为 customDraggableModalDialog。

Answer 2

分辨率：

自 6 个月以来，我们一直在为在后台打开模式而苦苦挣扎，以下设置为我们所有的客户解决了这个问题：

将 IE 中的缓存行为从“自动”更改为“每次页面更改时”，您将永远不会遇到这个古怪的问题:)

如何在弹出 window 打开时保持背景元素可用

How to keep background elements available when a popup window is open

r

modal-dialog

popup

shiny