Modal dialogs

Modals are a flexible alert window, which disable interaction with the page behind them. Modals may include inputs, buttons, or simply text. Each modal may be assigned an id. By default hideModal() will hide all modals, but you may instead specify a modal's id in which case only that modal is closed. Additionally, when id is not NULL observers and reactives may watch for the modal's close event.

modal(
  id,
  ...,
  header = NULL,
  footer = NULL,
  center = FALSE,
  size = "md",
  fade = TRUE
)

showModal(modal, session = getDefaultReactiveDomain())

closeModal(id = NULL, session = getDefaultReactiveDomain())

Arguments

id	A character string specifying the id of the modal, when closed input[[id]] is set to TRUE.
...	Unnamed values passed as tag elements to the body of the modal. or named values passed as HTML attributes to the body element of the modal.
header	A character string or tag element specifying the header of the modal.
footer	A character string or tag element specifying the footer of the modal.
center	One of TRUE or FALSE specifying whether the modal is vertically centered on the page, defaults to FALSE.
size	One of "sm" (small), "md" (medium), "lg" (large), or "xl" (extra large) specifying the relative width of the modal, defaults to "md".
fade	One of TRUE or FALSE specifying if the modal fades in when shown and fades out when closed, defaults to TRUE.
modal	A modal tag element created using modal().
session	A reactive context, defaults to getDefaultReactiveDomain().

Example application

ui <- container(
  buttonInput(
    id = "open",
    "Open modal",
    icon("plus")
  )
)

server <- function(input, output) {
  modal1 <- modal(
    title = "A simple modal",
    p(
      "Cras mattis consectetur purus sit amet fermentum.",
      "Cras justo odio, dapibus ac facilisis in, egestas",
      "eget quam. Morbi leo risus, porta ac consectetur",
      "ac, vestibulum at eros."
    )
  )

  observeEvent(input$open, ignoreInit = TRUE, {
    showModal(modal1)
  })
}

shinyApp(ui, server)

See also

Other components: alert(), badge(), blockquote(), card(), collapsePane(), d1(), dropdown(), img(), jumbotron(), navContent(), popover(), pre(), toast()

Examples

### Simple modal

modal(
  id = "simple",
  header = h5("Title"),
  p("Cras placerat accumsan nulla.")
)
#> <div class="yonder-modal modal fade" id="simple" tabindex="-1" role="dialog">
#>   <div class="modal-dialog" role="document">
#>     <div class="modal-content">
#>       <div class="modal-header">
#>         <h5 class="modal-title">Title</h5>
#>         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
#>           <span aria-hidden="true">&times;</span>
#>         </button>
#>       </div>
#>       <div class="modal-body">
#>         <p>Cras placerat accumsan nulla.</p>
#>       </div>
#>     </div>
#>   </div>
#> </div>

### Modal with container body

modal(
  id = "more_complex",
  size = "lg",
  header = h5("More complex"),
  container(
    columns(
      column("Cras placerat accumsan nulla."),
      column("Curabitur lacinia pulvinar nibh."),
      column(
        "Aliquam posuere.",
        "Praesent fermentum tempor tellus."
      )
    )
  )
)
#> <div class="yonder-modal modal fade" id="more_complex" tabindex="-1" role="dialog">
#>   <div class="modal-dialog modal-lg" role="document">
#>     <div class="modal-content">
#>       <div class="modal-header">
#>         <h5 class="modal-title">More complex</h5>
#>         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
#>           <span aria-hidden="true">&times;</span>
#>         </button>
#>       </div>
#>       <div class="modal-body">
#>         <div class="container-fluid">
#>           <div class="row">
#>             <div class="col">Cras placerat accumsan nulla.</div>
#>             <div class="col">Curabitur lacinia pulvinar nibh.</div>
#>             <div class="col">
#>               Aliquam posuere.
#>               Praesent fermentum tempor tellus.
#>             </div>
#>           </div>
#>         </div>
#>       </div>
#>     </div>
#>   </div>
#> </div>