---
title: Modals
summary: Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
description: Dialogs for notifications and content.
---
Modals are built with HTML, CSS, and JavaScript. They’re positioned over everything else in the document and remove scroll from the `` so that modal content scrolls instead.
## Default markup
To create a modal, you need to add a `.modal` element to the document. Inside the `.modal`, you need to add a `.modal-dialog` element, which contains a `.modal-content` element. The `.modal-content` element contains the modal’s header, body, and footer.
```html
...
...
```
Look at the example below to see how the modal looks.
{% capture html -%}
Modal title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci animi beatae delectus
deleniti dolorem eveniet facere fuga iste nemo nesciunt nihil odio perspiciatis, quia quis
reprehenderit sit tempora totam unde.
{%- endcapture %}
{% include "docs/example.html" html=html centered bg="surface-secondary" %}
## Prompt and alert
You can use the modal to create a prompt or alert. Look at the example below to see how the prompt and alert look.
{% capture html -%}
Are you sure?
Do you really want to remove 84 files? What you've done cannot be undone.
{%- endcapture %}
{% include "docs/example.html" html=html raw bg="surface-secondary" %}
{% capture html -%}
Payment succeeded
Your payment of $290 has been successfully submitted. Your invoice has been sent to
support@tabler.io.
{%- endcapture %}
{% include "docs/example.html" html=html raw bg="surface-secondary" %}
## Modal with form
You can use the modal to create a form. Look at the example below to see how the form looks.
{% capture html -%}
New report
https://tabler.io/reports/
{%- endcapture %}
{% include "docs/example.html" html=html raw bg="surface-secondary" class="px-5" %}