Modal

Bootstrap modals from a div and a shortcode.

What the modal extension is for, how to enable it, and the smallest pair of a button and a container that opens a modal.
Author

Mickaël CANOUIL, Ph.D.

A Bootstrap modal is a dozen nested divs with the right classes, the right data-bs- attributes, and the right ARIA wiring. Writing that by hand in a Quarto document means writing raw HTML, and losing markdown inside it.

modal writes the wiring for you. A div whose identifier starts with modal- becomes the dialog, its first heading becomes the title, and a shortcode gives you the button that opens it. The content stays markdown throughout.

Installation

quarto add mcanouil/quarto-modal@1.5.2

This will install the extension under the _extensions subdirectory. If you are using version control, you will want to check in this directory.

Or install it from your editor with Quarto Wizard:

Visual Studio Code Positron VSCodium

Quick start

Enable the filter:

filters:
  - modal

Then write the container and a button that opens it:

{{< modal toggle target=modal-hello label="Say hello" >}}

::: {#modal-hello}
## Hello

The body of the modal, written as ordinary markdown.
:::

Which gives you this:

The identifier has to start with modal-; that prefix is how the extension tells a dialog from any other div.

See the Reference for every option, and the Examples for each of them rendered.

Where it works

HTML formats that carry JavaScript and Bootstrap, which is Quarto’s default html and its website and book projects.

Note

Where Bootstrap is absent, revealjs among others, the container renders as an ordinary div, so its content stays in the flow of the page, and the buttons render nothing at all. Nothing breaks, but write the container so it reads sensibly when it is not a dialog.

Back to top