闪亮中的标签$样式特定模态对话框元素答案

【问题标题】：tags$style specific modaldialog element in shiny闪亮中的标签$样式特定模态对话框元素
【发布时间】：2017-10-19 12:43:23
【问题描述】：

我认为是基本语法问题，但我坚持下去。我有一个应用程序，其中包含许多我尝试设置样式的元素，例如 modalDialogs。如何使此代码仅特定于 modaldialog 1，而不适用于 modaldialog 2？

tags$head(tags$style(".modal-body {padding: 10px}
                     .modal-content  {-webkit-border-radius: 6px !important;-moz-border-radius: 6px !important;border-radius: 6px !important;}
                     .modal-dialog { width: 240px; display: inline-block; text-align: left; vertical-align: top;}
                     .modal-header {background-color: #339FFF; border-top-left-radius: 6px; border-top-right-radius: 6px}
                     .modal { text-align: right; padding-right:10px; padding-top: 24px;}
                     .close { font-size: 16px}"))

完整的演示应用程序：

library(shiny)

ui <- fluidPage(  
  tags$head(tags$style(".modal-body {padding: 10px}
                         .modal-content  {-webkit-border-radius: 6px !important;-moz-border-radius: 6px !important;border-radius: 6px !important;}
                       .modal-dialog { width: 240px; display: inline-block; text-align: left; vertical-align: top;}
                       .modal-header {background-color: #339FFF; border-top-left-radius: 6px; border-top-right-radius: 6px}
                       .modal { text-align: right; padding-right:10px; padding-top: 24px;}
                       .close { font-size: 16px}")),
  h5("Hello there"),                                          # First text on the window
  br(),                                                       # empty line
  actionButton(inputId = "ClickonMe", label = "button1"),   # button 1
  actionButton(inputId = "ClickonMe2", label = "button2") # button 2
)

server <- function(input,output,session) {

  observeEvent(input$ClickonMe,{
    showModal(modalDialog(
      inputId = 'Dialog1', 
      title = HTML('<span style="color:white; font-size: 20px; font-weight:bold; font-family:sans-serif ">Display help popups<span>
                   <button type = "button" class="close" data-dismiss="modal" ">
                   <span style="color:white; ">x <span>
                   </button> '),
      easyClose = TRUE,
      footer = NULL ))
  })

  observeEvent(input$ClickonMe2,{

    showModal(modalDialog(
      inputId = 'Dialog2', 
      title = HTML('<span style="color:white; font-size: 20px; font-weight:bold; font-family:sans-serif ">Display help popups<span>
                   <button type = "button" class="close" data-dismiss="modal" ">
                   <span style="color:white; ">x <span>
                   </button> '),
      easyClose = TRUE,
      footer = NULL ))
      })


}

shinyApp(ui, server)

如果可以的话，感谢您的帮助！

标记

【问题讨论】：

标签： r shiny tags modal-dialog

【解决方案1】：

一种可能：将模态框包含在一个带有 id 的 div 容器中（例如 modal1）：

showModal(tags$div(id="modal1", modalDialog(
  inputId = 'Dialog1', 
  title = HTML('<span style="color:white; font-size: 20px; font-weight:bold; font-family:sans-serif ">Display help popups<span>
               <button type = "button" class="close" data-dismiss="modal" ">
               <span style="color:white; ">x <span>
               </button> '),
  easyClose = TRUE,
  footer = NULL )))

然后使用这个css：

  tags$head(tags$style("#modal1 .modal-body {padding: 10px}
                       #modal1 .modal-content  {-webkit-border-radius: 6px !important;-moz-border-radius: 6px !important;border-radius: 6px !important;}
                       #modal1 .modal-dialog { width: 240px; display: inline-block; text-align: left; vertical-align: top;}
                       #modal1 .modal-header {background-color: #339FFF; border-top-left-radius: 6px; border-top-right-radius: 6px}
                       #modal1 .modal { text-align: right; padding-right:10px; padding-top: 24px;}
                       #modal1 .close { font-size: 16px}"))

【讨论】：

是的，我试图在你放置#modal1 的任何地方添加#Dialog1，不知道为什么会失败最后 1 是 moda1，缺少一个字母
这也是我第一次尝试的。检查 html，你会明白为什么这不起作用。 id Dialog1 在模态对象内，它不包含它们。
@StéphaneLaurent，是否可以使用tag$link()为不同的modals添加不同css文件的引用？