打开弹出窗口时如何保持背景元素可用

Question

我使用的是R中的弹出窗口，其代码如下：

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)

我突然想到，当弹出窗口打开时，您不能使用背景上的元素。整个背景都是灰暗的。

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

有可能做到这一点吗？如果是这样的话，是怎么做的？

Answer 1

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

1. 你必须隐藏背景(灰色背景)本身。
2. 移动模式有一个家长覆盖覆盖全屏幕，以允许自由行动。此覆盖捕获所有指针事件，并使其下面的所有内容都不可点击。
3. draggableModalDialog元素具有属性tabindex="-1"，这是一种阻止与模式外输入字段交互的tabindex="-1"技巧。请看吉顿的来源。

问题#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中的缓存行为从“自动”更改为“每次页面更改”，您将永远不会面对这个奇怪的问题:)