Examples

Modals you can open.

Working Bootstrap modals built by the extension, one per option, with the source alongside each.

Every button below opens a modal built by the extension as this page was rendered.

This site sets two defaults for all of them, in _quarto.yml:

extensions:
  modal:
    fade: true
    centred: true

Individual modals below override those.

A modal with a footer

The first heading becomes the title, and a horizontal rule separates the footer from the body.

{{< modal toggle target=modal-basic label="Open the basic modal" >}}

::: {#modal-basic}
## A basic modal

The body, written as ordinary markdown, so a [link](https://quarto.org) or a
list works as it would anywhere else.

---

{{< modal dismiss inside=true label="Close" >}}
:::

The dismiss button sits inside the modal it closes, so it uses inside=true rather than naming a target.

Sizes

size takes the Bootstrap tokens or the friendly aliases.

::: {#modal-small size=small}
::: {#modal-large size=lg}
::: {#modal-xl size=extra-large}

Scrolling, fullscreen, and a static backdrop

::: {#modal-scrollable scrollable=true}
::: {#modal-fullscreen fullscreen=lg}
::: {#modal-static backdrop-static=true keyboard=false}

Opening a modal from a link

A link whose target is a modal identifier is expanded into a toggle, so a modal can be opened from the middle of a sentence, like this one.

[like this one](#modal-basic)

The explicit Bootstrap attributes work too, when a link would be the wrong element:

[Open it]{bs-target="#modal-basic" bs-toggle="modal"}

Accessibility

description points at the identifier of an element elsewhere on the page, and becomes the modal’s aria-describedby.

This paragraph carries the identifier the modal points at.

::: {#modal-described description="described-note" close-button-label="Dismiss this dialog"}

The identifier has to exist in the document; the extension warns when it does not, since a dangling aria-describedby is worse than none.

Source

The repository ships a short, standalone starting point you can copy: example.qmd.