タグ$ style固有のmodaldialog要素は光沢があります

Question

基本的な構文の質問私は思っていますが、私はそれに固執しています。 私は、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) 

感謝！

マーク

Answer 1

possiblity：ID（例えばmodal1）でのdivコンテナ内のモーダルを囲みます。その後、

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;} 
         #moda1 .close { font-size: 16px}"))