> For the complete documentation index, see [llms.txt](https://themedocs.zenit.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://themedocs.zenit.design/en/styling/components/modal.md).

# Modal

### Modal Widths

These settings define the width of the different **modal windows** used throughout the storefront.

A modal is a dialog or pop-up window that opens on top of the current page. It can display additional information or functionality without requiring the customer to navigate to another page.

One example is the information dialog that can be opened from the **price and VAT information** link on the product detail page.

<figure><img src="https://2915610672-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F4i6VN0FeNAgRFLwVM2Cr%2Fuploads%2FmijhYNZblL6OOwNZmxxR%2Fdocs-storefront-theme-components-modal.webp?alt=media&amp;token=1b1e2839-52c7-4eb3-88ad-4914967cea3f" alt=""><figcaption><p>Modal displaying price and VAT information on the product detail page.</p></figcaption></figure>

Following the Bootstrap modal sizes, the theme provides four different size settings:

* **Small Modal**
* **Medium Modal**
* **Large Modal**
* **Extra Large Modal**

For each size, you can define the maximum width individually in **pixels (px)**. For example, a Large Modal can be displayed at **900 px** instead of the default **800 px**.

#### Good to know

The values configured here define the width of the corresponding modal sizes globally for the theme. Which modal size is used depends on the respective dialog or storefront functionality.

Changing one of these settings therefore affects **all modal windows using the corresponding size class**.