最终，我认为这个请求可以为rintrojs 库中的一些有用功能提供帮助。无论如何，您的问题有两个方面：
-
introjs 不应该触发，直到模态在 HTML 中可用。最简单的方法是使用模式中的按钮来触发教程。如果您希望它是自动的，您将需要一些 JavaScript 等到 Modal 准备好后再触发。
-
introjs 想要将背景变灰并突出显示教程中的当前项目。这意味着它需要与模态孩子“交错”。因为模态是它自己的堆叠上下文，introjs 需要从模态内部触发以查看模态子项。如果您想查看 整个 模态，那么从父级触发 introjs 就足够了。这个功能似乎还没有在 rintrojs 包中，但在 JavaScript 库中。
为了完成 #1，我添加了一个 JavaScript 函数来在模态加载时触发 introjs（在加载 HTML 元素的可配置延迟之后）。这需要shinyjs 包。注意introJs(modal_id)，这确保教程在模态中触发。在纯 JavaScript 中，它将是 introJs('#modal'):
run_introjs_on_modal_up <- function(
modal_id
, input_data
, wait
) {
runjs(
paste0(
"$('"
, modal_id
, "').on('shown.bs.modal', function(e) {
setTimeout(function(){
introJs('", modal_id, "').addSteps("
, jsonlite::toJSON(input_data, auto_unbox=TRUE)
, ").start()
}, ", wait, ")
})"
)
)
}
我还添加了一个简单的帮助程序，用于在离开模式时关闭 introjs 教程。
introjs_exit <- function(){
runjs("introJs().exit()")
}
还需要一行 CSS 来修复 modal-backdrop 过度渴望并接管 DOM：
.modal-backdrop { z-index: -10;}
还有一个（大/不是最小）具有多个模态的工作示例。
library(rintrojs)
library(shiny)
library(shinydashboard)
library(shinyBS)
library(shinyjs)
intro_df <- data.frame(element = c('#plot_box', '#bttn2', '#box', '#modal'),
intro = c('test plot_box', 'test bttn2', 'test box', 'test modal'))
intro_df2 <- data.frame(element = c('#plot_box2'),
intro = c('test plot_box'))
run_introjs_on_modal_up <- function(
modal_id
, input_data
, wait
) {
runjs(
paste0(
"$('"
, modal_id
, "').on('shown.bs.modal', function(e) {
setTimeout(function(){
introJs('", modal_id, "').addSteps("
, jsonlite::toJSON(input_data, auto_unbox=TRUE)
, ").start()
}, ", wait, ")
})"
)
)
}
introjs_exit <- function(){
runjs("introJs().exit()")
}
ui <- shinyUI(fluidPage(
useShinyjs(),
tags$head(tags$style(".modal-backdrop { z-index: -10;}")),
introjsUI(),
mainPanel(
bsModal('modal', '', '', uiOutput('plot_box'), size = 'large'),
bsModal('modalblah', '', '', uiOutput('plot_box2'), size = 'large'),
actionButton("bttn", "Start intro")
)))
server <- shinyServer(function(input, output, session) {
output$plot <- renderPlot({
plot(rnorm(50))
})
output$plot2 <- renderPlot({
plot(rnorm(50))
})
output$plot_box <- renderUI({
box(id = 'box',
actionButton('bttn2', 'dummy'),
plotOutput('plot'), width = '100%'
)
})
output$plot_box2 <- renderUI({
box(id = 'box2',
plotOutput('plot2'), width = '100%'
)
})
run_introjs_on_modal_up("#modal",intro_df, 1000)
run_introjs_on_modal_up("#modalblah",intro_df2, 1000)
observeEvent(input$bttn,{
toggleModal(session, 'modal', toggle = 'toggle')
})
observeEvent(input$bttn2, {
toggleModal(session, 'modal', toggle = 'toggle')
introjs_exit()
toggleModal(session, 'modalblah', toggle = 'toggle')
})
})
shinyApp(ui = ui, server = server)