ブートストラップモーダルからgoogleVisグラフエディタを開きます

Question

googleVisテーブルをブートストラップモーダルに表示したい場合は、Googleグラフエディタを開くボタンも含めてください。このように：

library(shiny) 
library(shinyBS) 
library(googleVis) 

ui <- shinyUI(fluidPage(
    actionButton("openModal", "Open modal"), 
    bsModal("modal", "Google Charts", "openModal", 
      htmlOutput("gvistable")) 
)) 

server <- shinyServer(function(input, output){ 
    output$gvistable <- renderGvis({ 
    gvisTable(iris[1:2, 1:2], 
       options = list(gvis.editor = "Editor")) 
    }) 
}) 

shinyApp(ui=ui, server=server) 

問題は、Googleのグラフエディタ（モーダルの[エディタ]ボタンをクリックして）を開いたときに発生します。これは別のモーダルを開き、これは最初のモーダルの後ろにあります。最初のモーダルでGoogleのチャートエディタを積み重ねるにはどうすればいいですか？

Answer 1

これはクラス.google-visualization-charteditor-dialogにz-indexを設定することで動作します。

ui <- shinyUI(fluidPage(
    tags$head(tags$style(HTML(".google-visualization-charteditor-dialog {z-index: 1000000}"))), 
    actionButton("openModal", "Open modal"), 
    bsModal("modal", "Google Charts", "openModal", 
      htmlOutput("gvistable")) 
)) 

しかし、エディタの「カスタマイズ」タブの問題があります：メニューが隠されています。ここで

はshinyBSを使用しないソリューションです。

ui <- shinyUI(fluidPage(
    tags$head(
    tags$style(HTML(".google-visualization-charteditor-dialog {z-index: 1050}")) 
), 
    actionButton("openModal", "Open modal", 
       "data-toggle"="modal", "data-target"="#modal"), 
    tags$div(
    id = "modal", 
    class="modal fade", 
    tags$div(
     class="modal-dialog", 
     tags$div(class="modal-content", 
       tags$div(
       class="modal-header", 
       tags$button(
        type="button", class="close", "data-dismiss"="modal", 
        HTML("&times;") 
       ) 
       ), 
       tags$div(
       class="modal-body", 
       htmlOutput("gvistable") 
       ), 
       tags$div(
       class="modal-footer", 
       tags$button(
        type="button", class="btn btn-default", "data-dismiss"="modal", 
        "Close" 
       ) 
       ) 
    ) 
    ) 
) 
))