9.9 KiB
title, summary, description
| title | summary | description |
|---|---|---|
| Modals | Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content. | 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 <body> 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.
<div class="modal" tabindex="-1">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">...</div>
<div class="modal-body">...</div>
<div class="modal-footer">...</div>
</div>
</div>
</div>
Look at the example below to see how the modal looks.
{% capture html -%} Launch demo modal
Modal title
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?
{% capture html -%}
Payment succeeded
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 -%}