Modal windows are useful to make detailed explanations, and are typically attached to buttons or links. Thus, there are two parts to this system:
bs_modal(
id,
title,
body,
footer = bs_modal_closebutton(label = "Close"),
size = c("medium", "large", "small")
)
bs_modal_closebutton(label = "Close", title)
bs_attach_modal(tag, id_modal)character, unique id for the modal window
character, title for the modal window (this argument is deprecated
for bs_modal_closebutton, use label instead)
character (HTML) or htmltools::[tagList][htmltools::tagList],
content for the body of the modal window
character (HTML) or htmltools::[tagList][htmltools::tagList],
content for the footer of the modal window
character, size of the modal window
character (HTML), label for the close-button
htmltools::[tag][htmltools::tag],
button or link to which to attach the modal window
character, unique id of modal window to attach
bs_modal()htmltools::[tag][htmltools::tag], <div/>
bs_attach_modal()htmltools::[tag][htmltools::tag],
modified copy of tag
bs_modal_closebutton()htmltools::[tag][htmltools::tag], <button/>
A modal window, created using bs_modal()
At least one button or link to which the id of the
modal window is attached, using bs_attach_modal()
The verb attach is used to signify that we are attaching the id of our
modal window to the tag in question (generally a button or a link). This implies that
you can attach the id of a modal window to more than one button or link.
It is your responsibility to ensure that id is unique
among HTML elements in your page. If you have non-unique id's, strange things may
happen to your page.
Your code may be cleaner if you can import the content for the modal body from
an external source. Here, the function shiny::[includeMarkdown][shiny::includeMarkdown]
be useful.
If you want to compose your own footer for the modal window, the function
bs_modal_closebutton() can be useful.
shiny::[includeMarkdown][shiny::includeMarkdown]
library("htmltools") # also needs `markdown` package
library("shiny")
bs_modal(id = "modal", title = "I'm a modal", body = "Yes, I am.")
#> <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modal-title">
#> <div class="modal-dialog" role="document">
#> <div class="modal-content">
#> <div class="modal-header">
#> <button type="button" class="close" data-dismiss="modal" aria-label="Close">
#> <span aria-hidden="true">×</span>
#> </button>
#> <h4 class="modal-title" id="modal-title">I'm a modal</h4>
#> </div>
#> <div class="modal-body">Yes, I am.</div>
#> <div class="modal-footer">
#> <button class="btn btn-default" data-dismiss="modal">Close</button>
#> </div>
#> </div>
#> </div>
#> </div>
bs_button("Click for modal") %>%
bs_attach_modal(id_modal = "modal")
#> <button class="btn btn-default" data-toggle="modal" data-target="#modal">Click for modal</button>
bs_modal(
id = "modal_large",
title = "I'm a modal",
size = "large",
body = includeMarkdown(system.file("markdown", "modal.md", package = "bsplus"))
)
#> <div aria-labelledby="modal_large-title" class="modal fade bs-example-modal-lg" id="modal_large" role="dialog" tabindex="-1">
#> <div class="modal-dialog modal-lg" role="document">
#> <div class="modal-content">
#> <div class="modal-header">
#> <button type="button" class="close" data-dismiss="modal" aria-label="Close">
#> <span aria-hidden="true">×</span>
#> </button>
#> <h4 class="modal-title" id="modal_large-title">I'm a modal</h4>
#> </div>
#> <div class="modal-body"><h4>4th-level headers work well</h4>
#> <p>We can do our regular Markdown stuff in modal windows.</p>
#> <ul>
#> <li>\(F = ma\)</li>
#> <li>\(E = mc^2\)</li>
#> </ul>
#> </div>
#> <div class="modal-footer">
#> <button class="btn btn-default" data-dismiss="modal">Close</button>
#> </div>
#> </div>
#> </div>
#> </div>
bs_button("Click for modal") %>%
bs_attach_modal(id_modal = "modal_large")
#> <button class="btn btn-default" data-toggle="modal" data-target="#modal_large">Click for modal</button>