Modal dialogs

As of version 0.14, Shiny has built-in support for displaying modal dialogs.
Author

Winston Chang

Published

August 17, 2016

As of version 0.14, Shiny has built-in support for displaying modal dialogs like the one below:

Pop up of a box that says Important message. This is an important message! and has a Dismiss button.

Modal dialog screenshot

You can see the app in action here.

For the majority of use cases, there are three parts for displaying a modal dialog:

This simple app illustrates how these things fit together:

shinyApp(
  ui = basicPage(
    actionButton("show", "Show modal dialog")
  ),
  server = function(input, output) {
    observeEvent(input$show, {
      showModal(modalDialog(
        title = "Important message",
        "This is an important message!",
        easyClose = TRUE
      ))
    })
  }
)

The call to modalDialog() generates the HTML. If you simply run modalDialog() at the R console, it will print out the HTML for a modal dialog.

The call to showModal() sends the HTML to the client browser to be displayed.

Finally, there is observeEvent(). When input$show changes (in other words, when the button is pressed), it runs the showModal(modalDialog()) code.

Options

There are a few options that control the appearance an behavior of modalDialog():

  • title: An optional title for the modal dialog.
  • size: Controls the width of the modal dialog. Can be "s" for small, "m" for medium (the default), or "l" for large.
  • footer: Content to display in an optional footer for the modal dialog. The default is to display a button that dismisses the modal dialog.
  • easyClose: If TRUE, then clicking outside the modal dialog or pressing Esc will close the dialog. If FALSE (the default), then the user will have to click on the Dismiss button to close it.