Modals

library("htmltools")
library("bsplus")

Modal windows are a great way to deliver help-documentation, although they certainly have other uses. The first step is to define a modal widow, giving it an id.

bs_modal(id = "modal", title = "I'm a modal", body = "Yes, I am.")

×

I'm a modal

Yes, I am.

Close

To allow activation of the modal window, attach its id to a button (or link).

bs_button("Click for modal") %>%
  bs_attach_modal(id_modal = "modal")

Click for modal

The verb attach implies that you can attach an id to as many link tags you like. Thus:

bs_button("New button, same modal") %>%
  bs_attach_modal(id_modal = "modal")

New button, same modal

Let’s look at a more-involved example using all of the arguments for bs_modal().

In the example above, body is text; usually, you will want the body to HTML. One way to compose the HTML for the body is to write it as a Markdown file, then use the helper function shiny::includeMarkdown() to render it into into HTML.

The default footer is simply a “Close” button, which is made using the helper function bs_modal_closebutton(). You can compose your own footer, using this function to customize your close-button.

Finally, the size can be "small", "medium", or "large" - the defualt is "medium".

bs_modal(
  id = "modal_markdown", 
  title = "Using Markdown",
  body = includeMarkdown(system.file("markdown", "modal.md", package = "bsplus")),
  footer = tags$span(
    tags$span(class = "well", "Hello!"),
    bs_modal_closebutton("Goodbye!")
  ),
  size = "large"
)

×

Using Markdown

4th-level headers work well

We can do our regular Markdown stuff in modal windows.

• \(F = ma\)
• \(E = mc^2\)

Hello! Goodbye!

bs_button("Large modal") %>%
  bs_attach_modal(id_modal = "modal_markdown")

Large modal

Reference

For more information, please see the Bootstrap JavaScript page.