Data

Tools

Indexes

Applications

Experiments

Open Source Science

quarto-modal

A Quarto extension providing a simple way to create Bootstrap modals in your HTML documents.

https://github.com/mcanouil/quarto-modal

Science Score: 44.0%

This score indicates how likely this project is to be science-related based on various indicators:

  • ✓
    CITATION.cff file
    Found CITATION.cff file
  • ✓
    codemeta.json file
    Found codemeta.json file
  • ✓
    .zenodo.json file
    Found .zenodo.json file
  • ○
    DOI references
  • ○
    Academic publication links
  • ○
    Academic email domains
  • ○
    Institutional organization owner
  • ○
    JOSS paper metadata
  • ○
    Scientific vocabulary similarity
    Low similarity (10.2%) to scientific vocabulary

Keywords

modal modal-dialog quarto quarto-extension
Last synced: 6 months ago · JSON representation ·

Repository

A Quarto extension providing a simple way to create Bootstrap modals in your HTML documents.

Basic Info
Statistics
  • Stars: 9
  • Watchers: 0
  • Forks: 0
  • Open Issues: 0
  • Releases: 3
Topics
modal modal-dialog quarto quarto-extension
Created 7 months ago · Last pushed 7 months ago
Metadata Files
Readme Funding License Citation

README.md

Modal Extension For Quarto

This Quarto extension provides a simple way to create Bootstrap modals in your HTML documents. It allows you to define modal buttons and containers using shortcodes, making it easy to integrate modals into your content.

Installation

bash quarto add mcanouil/quarto-modal

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

Usage

To use modals in your HTML Quarto document, you need to include the modal extension in your YAML header.

yaml filters: - modal

Options

You can customise the modals generally by setting options in the extensions.modal section of your YAML header.

yaml extensions: modal: size: null|sm|lg|xl backdrop-static: false|true scrollable: false|true keyboard: true|false centred: false|true fade: false|true fullscreen: false|true|sm|md|lg|xl|xxl

Modal Structure

Modals are structured using a toggle button and a modal container.

Modal Button

  • Use {{< modal toggle ... >}} to create a button that opens a modal.
  • Use {{< modal dismiss ... >}} to create a button that closes a modal.
  • Named arguments:
    • target: the modal's unique identifier required unless inside=true.
    • label: the button text.
    • classes: custom CSS classes for the button, e.g., btn btn-primary.
    • inside: set to true if the dismiss button is inside the modal to be dismissed.

{.markdown shortcodes=false} {{< modal <toggle|dismiss> target=<modal-id> label=<label> classes=<classes> inside=<boolean> >}}

Alternatively, you can use the bs-target and bs-toggle attributes directly.

markdown [Button Text]{bs-target="#<modal-id>" bs-toggle="modal"} [Button Text](#<modal-id>){bs-toggle="modal"}

Or rely on the extension to automatically expand to the correct HTML syntax:

markdown [Button Text](#<modal-id>)

Modal Container

[!Important] The identifier needs to start with modal- to be recognised by the extension as a modal container.

```{.markdown shortcodes=false} :::: {#modal- description="" }

Modal Title

Body content goes here.

Footer content goes here. ::: ```

Example

Here is the source code for a minimal example: example.qmd.

Outputs of example.qmd:

Owner

  • Name: Mickaël Canouil
  • Login: mcanouil
  • Kind: user
  • Location: Lille, France

Biostatistician, Ph. D. (& cinephile) @RLille User Group Organiser

Citation (CITATION.cff) 

cff-version: 1.2.0
title: "modal Extension for Quarto"
message: "If you use this project, please cite it as below."
type: software
authors:
  - family-names: "Canouil"
    given-names: "Mickaël"
    orcid: "https://orcid.org/0000-0002-3396-4549"
repository-code: "https://github.com/mcanouil/quarto-modal"
url: "http://m.canouil.dev/quarto-modal/"
license: "MIT"
date-released: "2025-08-08"
version: 1.0.2

GitHub Events

Total
  • Create event: 5
  • Issues event: 1
  • Release event: 2
  • Watch event: 6
  • Delete event: 3
  • Public event: 1
  • Push event: 4
  • Pull request event: 5
Last Year
  • Create event: 5
  • Issues event: 1
  • Release event: 2
  • Watch event: 6
  • Delete event: 3
  • Public event: 1
  • Push event: 4
  • Pull request event: 5

Issues and Pull Requests

Last synced: 6 months ago

Dependencies

.github/workflows/release.yml actions