2014-07-12 11:20:15 +02:00
---
2015-08-15 07:45:55 +02:00
layout: docs
2014-07-12 11:20:15 +02:00
title: Modal
2017-05-28 08:01:14 +02:00
description: Use Bootstrap's JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.
2015-08-06 02:47:45 +02:00
group: components
2017-05-28 08:01:14 +02:00
toc: true
2014-07-12 11:20:15 +02:00
---
2016-12-24 23:04:44 +01:00
## How it works
2014-12-01 05:17:45 +01:00
2016-12-24 23:04:44 +01:00
Before getting started with Bootstrap's modal component, be sure to read the following as our menu options have recently changed.
2014-10-27 06:31:59 +01:00
2016-12-24 23:04:44 +01:00
- 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.
- Clicking on the modal "backdrop" will automatically close the modal.
- Bootstrap only supports one modal window at a time. Nested modals aren't supported as we believe them to be poor user experiences.
2017-01-05 23:24:40 +01:00
- Modals use `position: fixed` , which can sometimes be a bit particular about its rendering. Whenever possible, place your modal HTML in a top-level position to avoid potential interference from other elements. You'll likely run into issues when nesting a `.modal` within another fixed element.
2019-02-04 11:22:02 +01:00
- Once again, due to `position: fixed` , there are some caveats with using modals on mobile devices. [See our browser support docs ]({{< docsref "/getting-started/browsers-devices#modals-and-dropdowns-on-mobile" >}} ) for details.
2016-12-24 23:04:44 +01:00
- Due to how HTML5 defines its semantics, [the `autofocus` HTML attribute ](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autofocus ) has no effect in Bootstrap modals. To achieve the same effect, use some custom JavaScript:
2015-04-17 01:56:40 +02:00
2019-01-08 17:33:28 +01:00
{{< highlight js > }}
2019-05-14 13:36:10 +02:00
var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')
myModal.addEventListener('shown.bs.modal', function () {
myInput.focus()
2016-12-24 23:04:44 +01:00
})
2019-01-08 17:33:28 +01:00
{{< / highlight > }}
2015-04-17 01:56:40 +02:00
2019-01-08 17:33:28 +01:00
{{< callout info > }}
{{< partial " callout-info-prefersreducedmotion . md " > }}
{{< / callout > }}
2018-11-03 19:23:26 +01:00
2017-06-26 18:14:52 +02:00
Keep reading for demos and usage guidelines.
2016-12-24 23:04:44 +01:00
## Examples
2014-03-17 03:03:53 +01:00
2016-12-24 23:04:44 +01:00
### Modal components
2014-07-13 09:54:29 +02:00
2016-12-24 23:04:44 +01:00
Below is a _static_ modal example (meaning its `position` and `display` have been overridden). Included are the modal header, modal body (required for `padding` ), and modal footer (optional). We ask that you include modal headers with dismiss actions whenever possible, or provide another explicit dismiss action.
2014-07-13 09:54:29 +02:00
2015-04-16 23:07:20 +02:00
< div class = "bd-example bd-example-modal" >
2017-09-23 22:39:34 +02:00
< div class = "modal" tabindex = "-1" role = "dialog" >
2015-06-19 08:56:43 +02:00
< div class = "modal-dialog" role = "document" >
2014-07-13 09:54:29 +02:00
< div class = "modal-content" >
< div class = "modal-header" >
2016-12-25 02:26:19 +01:00
< h5 class = "modal-title" > Modal title< / h5 >
2015-01-04 05:08:58 +01:00
< button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close" >
< span aria-hidden = "true" > × < / span >
< / button >
2014-07-13 09:54:29 +02:00
< / div >
< div class = "modal-body" >
2016-12-24 23:04:44 +01:00
< p > Modal body text goes here.< / p >
2014-07-13 09:54:29 +02:00
< / div >
< div class = "modal-footer" >
< button type = "button" class = "btn btn-secondary" data-dismiss = "modal" > Close< / button >
< button type = "button" class = "btn btn-primary" > Save changes< / button >
< / div >
2016-12-24 23:04:44 +01:00
< / div >
< / div >
< / div >
2014-07-13 09:54:29 +02:00
< / div >
2014-03-17 03:03:53 +01:00
2019-01-08 17:33:28 +01:00
{{< highlight html > }}
2017-09-23 22:39:34 +02:00
< div class = "modal" tabindex = "-1" role = "dialog" >
2015-06-19 08:56:43 +02:00
< div class = "modal-dialog" role = "document" >
2014-03-17 03:03:53 +01:00
< div class = "modal-content" >
< div class = "modal-header" >
2016-12-25 02:26:19 +01:00
< h5 class = "modal-title" > Modal title< / h5 >
2015-01-04 05:08:58 +01:00
< button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close" >
< span aria-hidden = "true" > × < / span >
< / button >
2014-03-17 03:03:53 +01:00
< / div >
< div class = "modal-body" >
2016-12-24 23:04:44 +01:00
< p > Modal body text goes here.< / p >
2014-03-17 03:03:53 +01:00
< / div >
< div class = "modal-footer" >
2016-12-24 23:04:44 +01:00
< button type = "button" class = "btn btn-secondary" data-dismiss = "modal" > Close< / button >
2018-03-15 23:18:30 +01:00
< button type = "button" class = "btn btn-primary" > Save changes< / button >
2014-03-17 03:03:53 +01:00
< / div >
2016-12-24 23:04:44 +01:00
< / div >
< / div >
< / div >
2019-01-08 17:33:28 +01:00
{{< / highlight > }}
2014-03-17 03:03:53 +01:00
2014-07-13 09:54:29 +02:00
### Live demo
2014-03-17 03:03:53 +01:00
2016-12-24 23:04:44 +01:00
Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page.
2014-03-17 03:03:53 +01:00
2016-12-24 23:09:06 +01:00
< div id = "exampleModalLive" class = "modal fade" tabindex = "-1" role = "dialog" aria-labelledby = "exampleModalLiveLabel" aria-hidden = "true" >
2015-06-19 08:56:43 +02:00
< div class = "modal-dialog" role = "document" >
2014-07-13 09:54:29 +02:00
< div class = "modal-content" >
< div class = "modal-header" >
2016-12-25 02:26:19 +01:00
< h5 class = "modal-title" id = "exampleModalLiveLabel" > Modal title< / h5 >
2015-01-04 05:08:58 +01:00
< button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close" >
< span aria-hidden = "true" > × < / span >
< / button >
2014-07-13 09:54:29 +02:00
< / div >
< div class = "modal-body" >
2016-12-24 23:04:44 +01:00
< p > Woohoo, you're reading this text in a modal!< / p >
2014-07-13 09:54:29 +02:00
< / div >
< div class = "modal-footer" >
< button type = "button" class = "btn btn-secondary" data-dismiss = "modal" > Close< / button >
< button type = "button" class = "btn btn-primary" > Save changes< / button >
< / div >
2016-12-24 23:04:44 +01:00
< / div >
< / div >
2014-07-13 09:54:29 +02:00
< / div >
2016-12-24 23:04:44 +01:00
< div class = "bd-example" >
2016-12-24 23:09:06 +01:00
< button type = "button" class = "btn btn-primary" data-toggle = "modal" data-target = "#exampleModalLive" >
2014-07-13 09:54:29 +02:00
Launch demo modal
< / button >
< / div >
2014-03-17 03:03:53 +01:00
2019-01-08 17:33:28 +01:00
{{< highlight html > }}
2014-03-17 03:03:53 +01:00
<!-- Button trigger modal -->
2016-12-24 23:04:44 +01:00
< button type = "button" class = "btn btn-primary" data-toggle = "modal" data-target = "#exampleModal" >
2014-03-17 03:03:53 +01:00
Launch demo modal
< / button >
<!-- Modal -->
2017-01-12 00:30:48 +01:00
< div class = "modal fade" id = "exampleModal" tabindex = "-1" role = "dialog" aria-labelledby = "exampleModalLabel" aria-hidden = "true" >
2015-06-19 08:56:43 +02:00
< div class = "modal-dialog" role = "document" >
2014-03-17 03:03:53 +01:00
< div class = "modal-content" >
< div class = "modal-header" >
2016-12-25 02:26:19 +01:00
< h5 class = "modal-title" id = "exampleModalLabel" > Modal title< / h5 >
2015-01-04 05:08:58 +01:00
< button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close" >
< span aria-hidden = "true" > × < / span >
< / button >
2014-03-17 03:03:53 +01:00
< / div >
< div class = "modal-body" >
...
< / div >
< div class = "modal-footer" >
2014-07-09 02:14:14 +02:00
< button type = "button" class = "btn btn-secondary" data-dismiss = "modal" > Close< / button >
2014-03-17 03:03:53 +01:00
< button type = "button" class = "btn btn-primary" > Save changes< / button >
< / div >
< / div >
< / div >
< / div >
2019-01-08 17:33:28 +01:00
{{< / highlight > }}
2014-03-17 03:03:53 +01:00
2016-12-24 23:04:44 +01:00
### Scrolling long content
2014-03-17 03:03:53 +01:00
2016-12-24 23:04:44 +01:00
When modals become too long for the user's viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean.
2014-03-17 03:03:53 +01:00
2016-12-24 23:04:44 +01:00
< div id = "exampleModalLong" class = "modal fade" tabindex = "-1" role = "dialog" aria-labelledby = "exampleModalLongTitle" aria-hidden = "true" >
< div class = "modal-dialog" role = "document" >
2014-03-17 03:03:53 +01:00
< div class = "modal-content" >
2016-12-24 23:04:44 +01:00
< div class = "modal-header" >
2016-12-25 02:26:19 +01:00
< h5 class = "modal-title" id = "exampleModalLongTitle" > Modal title< / h5 >
2016-12-24 23:04:44 +01:00
< button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close" >
< span aria-hidden = "true" > × < / span >
< / button >
< / div >
< div class = "modal-body" >
< p > Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.< / p >
< p > Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.< / p >
< p > Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.< / p >
< p > Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.< / p >
< p > Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.< / p >
< p > Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.< / p >
< p > Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.< / p >
< p > Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.< / p >
< p > Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.< / p >
< p > Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.< / p >
< p > Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.< / p >
< p > Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.< / p >
< p > Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.< / p >
< p > Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.< / p >
< p > Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.< / p >
< p > Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.< / p >
< p > Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.< / p >
< p > Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.< / p >
< / div >
< div class = "modal-footer" >
< button type = "button" class = "btn btn-secondary" data-dismiss = "modal" > Close< / button >
< button type = "button" class = "btn btn-primary" > Save changes< / button >
< / div >
2014-03-17 03:03:53 +01:00
< / div >
< / div >
< / div >
2016-12-24 23:04:44 +01:00
< div class = "bd-example" >
< button type = "button" class = "btn btn-primary" data-toggle = "modal" data-target = "#exampleModalLong" >
Launch demo modal
< / button >
2014-03-17 03:03:53 +01:00
< / div >
2019-01-08 17:33:28 +01:00
{{< highlight html > }}
2016-12-24 23:04:44 +01:00
<!-- Button trigger modal -->
< button type = "button" class = "btn btn-primary" data-toggle = "modal" data-target = "#exampleModalLong" >
Launch demo modal
< / button >
2014-03-17 03:03:53 +01:00
2016-12-24 23:04:44 +01:00
<!-- Modal -->
< div class = "modal fade" id = "exampleModalLong" tabindex = "-1" role = "dialog" aria-labelledby = "exampleModalLongTitle" aria-hidden = "true" >
2017-10-29 23:14:10 +01:00
< div class = "modal-dialog" role = "document" >
< div class = "modal-content" >
< div class = "modal-header" >
< h5 class = "modal-title" id = "exampleModalLongTitle" > Modal title< / h5 >
< button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close" >
< span aria-hidden = "true" > × < / span >
< / button >
< / div >
< div class = "modal-body" >
...
< / div >
< div class = "modal-footer" >
< button type = "button" class = "btn btn-secondary" data-dismiss = "modal" > Close< / button >
< button type = "button" class = "btn btn-primary" > Save changes< / button >
< / div >
< / div >
< / div >
< / div >
2019-01-08 17:33:28 +01:00
{{< / highlight > }}
2017-10-29 23:14:10 +01:00
2019-01-20 22:28:16 +01:00
You can also create a scrollable modal that allows scroll the modal body by adding `.modal-dialog-scrollable` to `.modal-dialog` .
< div id = "exampleModalScrollable" class = "modal fade" tabindex = "-1" role = "dialog" aria-labelledby = "exampleModalScrollableTitle" aria-hidden = "true" >
< div class = "modal-dialog modal-dialog-scrollable" role = "document" >
< div class = "modal-content" >
< div class = "modal-header" >
< h5 class = "modal-title" id = "exampleModalScrollableTitle" > Modal title< / h5 >
< button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close" >
< span aria-hidden = "true" > × < / span >
< / button >
< / div >
< div class = "modal-body" >
< p > Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.< / p >
< p > Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.< / p >
< p > Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.< / p >
< p > Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.< / p >
< p > Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.< / p >
< p > Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.< / p >
< p > Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.< / p >
< p > Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.< / p >
< p > Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.< / p >
< p > Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.< / p >
< p > Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.< / p >
< p > Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.< / p >
< p > Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.< / p >
< p > Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.< / p >
< p > Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.< / p >
< p > Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.< / p >
< p > Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.< / p >
< p > Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.< / p >
< / div >
< div class = "modal-footer" >
< button type = "button" class = "btn btn-secondary" data-dismiss = "modal" > Close< / button >
< button type = "button" class = "btn btn-primary" > Save changes< / button >
< / div >
< / div >
< / div >
< / div >
< div class = "bd-example" >
< button type = "button" class = "btn btn-primary" data-toggle = "modal" data-target = "#exampleModalScrollable" >
Launch demo modal
< / button >
< / div >
2019-01-08 17:33:28 +01:00
{{< highlight html > }}
2019-01-20 22:28:16 +01:00
<!-- Button trigger modal -->
< button type = "button" class = "btn btn-primary" data-toggle = "modal" data-target = "#exampleModalScrollable" >
Launch demo modal
< / button >
<!-- Modal -->
< div class = "modal fade" id = "exampleModalScrollable" tabindex = "-1" role = "dialog" aria-labelledby = "exampleModalScrollableTitle" aria-hidden = "true" >
2019-02-08 00:49:13 +01:00
< div class = "modal-dialog modal-dialog-scrollable" role = "document" >
2019-01-20 22:28:16 +01:00
< div class = "modal-content" >
< div class = "modal-header" >
< h5 class = "modal-title" id = "exampleModalScrollableTitle" > Modal title< / h5 >
< button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close" >
< span aria-hidden = "true" > × < / span >
< / button >
< / div >
< div class = "modal-body" >
...
< / div >
< div class = "modal-footer" >
< button type = "button" class = "btn btn-secondary" data-dismiss = "modal" > Close< / button >
< button type = "button" class = "btn btn-primary" > Save changes< / button >
< / div >
< / div >
< / div >
< / div >
2019-01-08 17:33:28 +01:00
{{< / highlight > }}
2019-01-20 22:28:16 +01:00
2017-10-29 23:14:10 +01:00
### Vertically centered
2017-11-24 23:28:58 +01:00
Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
2017-10-29 23:14:10 +01:00
< div id = "exampleModalCenter" class = "modal fade" tabindex = "-1" role = "dialog" aria-labelledby = "exampleModalCenterTitle" aria-hidden = "true" >
< div class = "modal-dialog modal-dialog-centered" role = "document" >
< div class = "modal-content" >
< div class = "modal-header" >
< h5 class = "modal-title" id = "exampleModalCenterTitle" > Modal title< / h5 >
< button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close" >
< span aria-hidden = "true" > × < / span >
< / button >
< / div >
< div class = "modal-body" >
< p > Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.< / p >
< / div >
< div class = "modal-footer" >
< button type = "button" class = "btn btn-secondary" data-dismiss = "modal" > Close< / button >
< button type = "button" class = "btn btn-primary" > Save changes< / button >
< / div >
< / div >
< / div >
< / div >
2019-01-20 22:28:16 +01:00
< div id = "exampleModalCenteredScrollable" class = "modal fade" tabindex = "-1" role = "dialog" aria-labelledby = "exampleModalCenteredScrollableTitle" aria-hidden = "true" >
< div class = "modal-dialog modal-dialog-scrollable modal-dialog-centered" role = "document" >
< div class = "modal-content" >
< div class = "modal-header" >
< h5 class = "modal-title" id = "exampleModalCenteredScrollableTitle" > Modal title< / h5 >
< button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close" >
< span aria-hidden = "true" > × < / span >
< / button >
< / div >
< div class = "modal-body" >
< p > Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.< / p >
< p > Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.< / p >
< p > Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.< / p >
< p > Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.< / p >
< p > Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.< / p >
< / div >
< div class = "modal-footer" >
< button type = "button" class = "btn btn-secondary" data-dismiss = "modal" > Close< / button >
< button type = "button" class = "btn btn-primary" > Save changes< / button >
< / div >
< / div >
< / div >
< / div >
2017-10-29 23:14:10 +01:00
< div class = "bd-example" >
< button type = "button" class = "btn btn-primary" data-toggle = "modal" data-target = "#exampleModalCenter" >
2019-01-20 22:28:16 +01:00
Vertically centered modal
< / button >
< button type = "button" class = "btn btn-primary" data-toggle = "modal" data-target = "#exampleModalCenteredScrollable" >
Vertically centered scrollable modal
2017-10-29 23:14:10 +01:00
< / button >
< / div >
2019-01-08 17:33:28 +01:00
{{< highlight html > }}
2017-10-29 23:14:10 +01:00
<!-- Button trigger modal -->
< button type = "button" class = "btn btn-primary" data-toggle = "modal" data-target = "#exampleModalCenter" >
Launch demo modal
< / button >
<!-- Modal -->
< div class = "modal fade" id = "exampleModalCenter" tabindex = "-1" role = "dialog" aria-labelledby = "exampleModalCenterTitle" aria-hidden = "true" >
2017-12-29 04:51:36 +01:00
< div class = "modal-dialog modal-dialog-centered" role = "document" >
2016-12-24 23:04:44 +01:00
< div class = "modal-content" >
2014-07-13 09:54:29 +02:00
< div class = "modal-header" >
2018-02-09 17:05:21 +01:00
< h5 class = "modal-title" id = "exampleModalCenterTitle" > Modal title< / h5 >
2015-01-04 05:08:58 +01:00
< button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close" >
< span aria-hidden = "true" > × < / span >
< / button >
2014-07-13 09:54:29 +02:00
< / div >
< div class = "modal-body" >
...
< / div >
2016-12-24 23:04:44 +01:00
< div class = "modal-footer" >
< button type = "button" class = "btn btn-secondary" data-dismiss = "modal" > Close< / button >
< button type = "button" class = "btn btn-primary" > Save changes< / button >
< / div >
2014-07-13 09:54:29 +02:00
< / div >
< / div >
< / div >
2019-01-08 17:33:28 +01:00
{{< / highlight > }}
2014-03-17 03:03:53 +01:00
2016-12-24 23:04:44 +01:00
### Tooltips and popovers
2014-07-13 09:54:29 +02:00
2019-02-04 11:22:02 +01:00
[Tooltips ]({{< docsref "/components/tooltips" >}} ) and [popovers ]({{< docsref "/components/popovers" >}} ) can be placed within modals as needed. When modals are closed, any tooltips and popovers within are also automatically dismissed.
2016-12-24 23:04:44 +01:00
< div id = "exampleModalPopovers" class = "modal fade" tabindex = "-1" role = "dialog" aria-labelledby = "exampleModalPopoversLabel" aria-hidden = "true" >
< div class = "modal-dialog" role = "document" >
< div class = "modal-content" >
2014-07-13 09:54:29 +02:00
< div class = "modal-header" >
2016-12-25 02:26:19 +01:00
< h5 class = "modal-title" id = "exampleModalPopoversLabel" > Modal title< / h5 >
2015-01-04 05:08:58 +01:00
< button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close" >
< span aria-hidden = "true" > × < / span >
< / button >
2014-07-13 09:54:29 +02:00
< / div >
< div class = "modal-body" >
2016-12-24 23:04:44 +01:00
< h5 > Popover in a modal< / h5 >
2017-06-21 11:47:14 +02:00
< p > This < a href = "#" role = "button" class = "btn btn-secondary popover-test" title = "Popover title" data-content = "Popover body content is set in this attribute." data-container = "#exampleModalPopovers" > button< / a > triggers a popover on click.< / p >
2016-12-24 23:04:44 +01:00
< hr >
< h5 > Tooltips in a modal< / h5 >
2017-06-21 11:47:14 +02:00
< p > < a href = "#" class = "tooltip-test" title = "Tooltip" data-container = "#exampleModalPopovers" > This link< / a > and < a href = "#" class = "tooltip-test" title = "Tooltip" data-container = "#exampleModalPopovers" > that link< / a > have tooltips on hover.< / p >
2016-12-24 23:04:44 +01:00
< / div >
< div class = "modal-footer" >
< button type = "button" class = "btn btn-secondary" data-dismiss = "modal" > Close< / button >
< button type = "button" class = "btn btn-primary" > Save changes< / button >
2014-07-13 09:54:29 +02:00
< / div >
< / div >
< / div >
< / div >
2016-12-24 23:04:44 +01:00
< div class = "bd-example" >
< button type = "button" class = "btn btn-primary" data-toggle = "modal" data-target = "#exampleModalPopovers" >
Launch demo modal
< / button >
< / div >
2014-03-17 03:03:53 +01:00
2019-01-08 17:33:28 +01:00
{{< highlight html > }}
2016-12-24 23:04:44 +01:00
< div class = "modal-body" >
< h5 > Popover in a modal< / h5 >
< p > This < a href = "#" role = "button" class = "btn btn-secondary popover-test" title = "Popover title" data-content = "Popover body content is set in this attribute." > button< / a > triggers a popover on click.< / p >
< hr >
< h5 > Tooltips in a modal< / h5 >
< p > < a href = "#" class = "tooltip-test" title = "Tooltip" > This link< / a > and < a href = "#" class = "tooltip-test" title = "Tooltip" > that link< / a > have tooltips on hover.< / p >
2014-03-17 03:03:53 +01:00
< / div >
2019-01-08 17:33:28 +01:00
{{< / highlight > }}
2014-03-17 03:03:53 +01:00
2016-12-24 23:04:44 +01:00
### Using the grid
2015-03-01 22:44:10 +01:00
2016-12-24 23:04:44 +01:00
Utilize the Bootstrap grid system within a modal by nesting `.container-fluid` within the `.modal-body` . Then, use the normal grid system classes as you would anywhere else.
2015-03-01 22:44:10 +01:00
< div id = "gridSystemModal" class = "modal fade" tabindex = "-1" role = "dialog" aria-labelledby = "gridModalLabel" aria-hidden = "true" >
2015-06-19 08:56:43 +02:00
< div class = "modal-dialog" role = "document" >
2015-03-01 22:44:10 +01:00
< div class = "modal-content" >
< div class = "modal-header" >
2016-12-24 23:04:44 +01:00
< h5 class = "modal-title" id = "gridModalLabel" > Grids in modals< / h5 >
2016-12-25 02:26:19 +01:00
< button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close" > < span aria-hidden = "true" > × < / span > < / button >
2015-03-01 22:44:10 +01:00
< / div >
< div class = "modal-body" >
2015-08-21 11:23:41 +02:00
< div class = "container-fluid bd-example-row" >
< div class = "row" >
< div class = "col-md-4" > .col-md-4< / div >
2017-07-01 19:42:36 +02:00
< div class = "col-md-4 ml-auto" > .col-md-4 .ml-auto< / div >
2015-08-21 11:23:41 +02:00
< / div >
< div class = "row" >
2017-07-01 19:42:36 +02:00
< div class = "col-md-3 ml-auto" > .col-md-3 .ml-auto< / div >
< div class = "col-md-2 ml-auto" > .col-md-2 .ml-auto< / div >
2015-08-21 11:23:41 +02:00
< / div >
< div class = "row" >
2017-07-01 19:42:36 +02:00
< div class = "col-md-6 ml-auto" > .col-md-6 .ml-auto< / div >
2015-08-21 11:23:41 +02:00
< / div >
< div class = "row" >
< div class = "col-sm-9" >
Level 1: .col-sm-9
< div class = "row" >
2016-11-04 17:54:34 +01:00
< div class = "col-8 col-sm-6" >
Level 2: .col-8 .col-sm-6
2015-08-21 11:23:41 +02:00
< / div >
2016-11-04 17:54:34 +01:00
< div class = "col-4 col-sm-6" >
Level 2: .col-4 .col-sm-6
2015-08-21 11:23:41 +02:00
< / div >
2015-03-01 22:44:10 +01:00
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "modal-footer" >
2016-10-13 20:35:20 +02:00
< button type = "button" class = "btn btn-secondary" data-dismiss = "modal" > Close< / button >
2015-03-01 22:44:10 +01:00
< button type = "button" class = "btn btn-primary" > Save changes< / button >
< / div >
< / div >
< / div >
< / div >
2016-12-24 23:04:44 +01:00
< div class = "bd-example" >
< button type = "button" class = "btn btn-primary" data-toggle = "modal" data-target = "#gridSystemModal" >
Launch demo modal
< / button >
2015-03-01 22:44:10 +01:00
< / div >
2019-01-08 17:33:28 +01:00
{{< highlight html > }}
2016-12-24 23:04:44 +01:00
< div class = "modal-body" >
< div class = "container-fluid" >
< div class = "row" >
< div class = "col-md-4" > .col-md-4< / div >
2017-07-01 19:42:36 +02:00
< div class = "col-md-4 ml-auto" > .col-md-4 .ml-auto< / div >
2016-12-24 23:04:44 +01:00
< / div >
< div class = "row" >
2017-07-01 19:42:36 +02:00
< div class = "col-md-3 ml-auto" > .col-md-3 .ml-auto< / div >
< div class = "col-md-2 ml-auto" > .col-md-2 .ml-auto< / div >
2016-12-24 23:04:44 +01:00
< / div >
< div class = "row" >
2017-07-01 19:42:36 +02:00
< div class = "col-md-6 ml-auto" > .col-md-6 .ml-auto< / div >
2016-12-24 23:04:44 +01:00
< / div >
< div class = "row" >
< div class = "col-sm-9" >
Level 1: .col-sm-9
< div class = "row" >
< div class = "col-8 col-sm-6" >
Level 2: .col-8 .col-sm-6
< / div >
< div class = "col-4 col-sm-6" >
Level 2: .col-4 .col-sm-6
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
2019-01-08 17:33:28 +01:00
{{< / highlight > }}
2016-12-24 23:04:44 +01:00
### Varying modal content
2019-02-19 15:19:02 +01:00
Have a bunch of buttons that all trigger the same modal with slightly different contents? Use `event.relatedTarget` and [HTML `data-*` attributes ](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes ) to vary the contents of the modal depending on which button was clicked.
2014-11-10 07:02:53 +01:00
2016-12-24 23:04:44 +01:00
Below is a live demo followed by example HTML and JavaScript. For more information, [read the modal events docs ](#events ) for details on `relatedTarget` .
2014-11-10 07:02:53 +01:00
2019-01-08 17:33:28 +01:00
{{< example > }}
2016-12-24 23:04:44 +01:00
< button type = "button" class = "btn btn-primary" data-toggle = "modal" data-target = "#exampleModal" data-whatever = "@mdo" > Open modal for @mdo </ button >
< button type = "button" class = "btn btn-primary" data-toggle = "modal" data-target = "#exampleModal" data-whatever = "@fat" > Open modal for @fat </ button >
< button type = "button" class = "btn btn-primary" data-toggle = "modal" data-target = "#exampleModal" data-whatever = "@getbootstrap" > Open modal for @getbootstrap </ button >
< div class = "modal fade" id = "exampleModal" tabindex = "-1" role = "dialog" aria-labelledby = "exampleModalLabel" aria-hidden = "true" >
< div class = "modal-dialog" role = "document" >
< div class = "modal-content" >
< div class = "modal-header" >
2016-12-25 02:26:19 +01:00
< h5 class = "modal-title" id = "exampleModalLabel" > New message< / h5 >
2016-12-24 23:04:44 +01:00
< button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close" >
< span aria-hidden = "true" > × < / span >
< / button >
< / div >
< div class = "modal-body" >
< form >
2019-08-29 22:07:55 +02:00
< div class = "mb-3" >
2017-10-19 19:31:49 +02:00
< label for = "recipient-name" class = "col-form-label" > Recipient:< / label >
2016-12-24 23:04:44 +01:00
< input type = "text" class = "form-control" id = "recipient-name" >
< / div >
2019-08-29 22:07:55 +02:00
< div class = "mb-3" >
2017-10-19 19:31:49 +02:00
< label for = "message-text" class = "col-form-label" > Message:< / label >
2016-12-24 23:04:44 +01:00
< textarea class = "form-control" id = "message-text" > < / textarea >
< / div >
< / form >
< / div >
< div class = "modal-footer" >
< button type = "button" class = "btn btn-secondary" data-dismiss = "modal" > Close< / button >
< button type = "button" class = "btn btn-primary" > Send message< / button >
2014-11-10 07:02:53 +01:00
< / div >
< / div >
< / div >
< / div >
2019-01-08 17:33:28 +01:00
{{< / example > }}
2014-11-10 07:02:53 +01:00
2019-01-08 17:33:28 +01:00
{{< highlight js > }}
2019-05-14 13:36:10 +02:00
var exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', function (event) {
// Button that triggered the modal
var button = event.relatedTarget
// Extract info from data-* attributes
var recipient = button.getAttribute('data-whatever')
2019-02-19 15:19:02 +01:00
// If necessary, you could initiate an AJAX request here
// and then do the updating in a callback.
2019-05-14 13:36:10 +02:00
//
2019-02-19 15:19:02 +01:00
// Update the modal's content.
2019-05-14 13:36:10 +02:00
exampleModal.querySelector('.modal-title').textContent = 'New message to ' + recipient
exampleModal.querySelector('.modal-body input').value = recipient
2014-11-10 07:02:53 +01:00
})
2019-01-08 17:33:28 +01:00
{{< / highlight > }}
2014-11-10 07:02:53 +01:00
2018-08-13 09:00:53 +02:00
### Change animation
The `$modal-fade-transform` variable determines the transform state of `.modal-dialog` before the modal fade-in animation, the `$modal-show-transform` variable determines the transform of `.modal-dialog` at the end of the modal fade-in animation.
If you want for example a zoom-in animation, you can set `$modal-fade-transform: scale(.8)` .
2016-12-24 23:04:44 +01:00
### Remove animation
For modals that simply appear rather than fade in to view, remove the `.fade` class from your modal markup.
2019-01-08 17:33:28 +01:00
{{< highlight html > }}
2016-12-24 23:04:44 +01:00
< div class = "modal" tabindex = "-1" role = "dialog" aria-labelledby = "..." aria-hidden = "true" >
...
< / div >
2019-01-08 17:33:28 +01:00
{{< / highlight > }}
2016-12-24 23:04:44 +01:00
### Dynamic heights
2015-03-01 22:44:10 +01:00
2019-05-14 13:36:10 +02:00
If the height of a modal changes while it is open, you should call `myModal.handleUpdate()` to readjust the modal's position in case a scrollbar appears.
2015-03-01 22:44:10 +01:00
2016-12-24 23:04:44 +01:00
### Accessibility
Be sure to add `role="dialog"` and `aria-labelledby="..."` , referencing the modal title, to `.modal` , and `role="document"` to the `.modal-dialog` itself. Additionally, you may give a description of your modal dialog with `aria-describedby` on `.modal` .
### Embedding YouTube videos
Embedding YouTube videos in modals requires additional JavaScript not in Bootstrap to automatically stop playback and more. [See this helpful Stack Overflow post ](https://stackoverflow.com/questions/18622508/bootstrap-3-and-youtube-in-modal ) for more information.
## Optional sizes
2016-05-17 15:14:07 +02:00
Modals have three optional sizes, available via modifier classes to be placed on a `.modal-dialog` . These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.
2016-12-24 23:04:44 +01:00
v5: Forms update (#28450)
* Initial spike of consolidated form checks
* Stub out forms rearrangement
- Prepping to drop non-custom file and range inputs
- Prepping to merge custom and native checks and radios (with switches)
- Prepping to merge custom select with form select
- Moving docs arround so forms has it's own area given volume of CSS
* Move input group Sass file to forms subdir
* Start to split and move the docs around
* Simpler imports
* Copyediting
* delete overview file
* Remove commented out code
* remove the custom-forms import
* rewrite flex-check as form-check, replace all custom properties
* Remove old forms doc
* stub out new subpage link section
* update migration guide
* Update nav, forms overview in page nav, and descriptions
* fix check bg position
* fix margin-top calculation
* rename .custom-select to .form-select
* Update validation styles for new checks
* add some vertical margin, fix inline checks
* fix docs examples
* better way to do this contents stuff, redo the toc while i'm at it
* page restyle for docs while here
* un-callout that, edit text
* redo padding on toc
* fix toc
* start to cleanup checks docs
* Rewrite Markdown tables into HTML
* Redesign tables, redo their docs
* Replace Open Iconic icons with custom Bootstrap icons
* Redesign the docs navbar, add a subheader, redo the sidebar
* Redesign docs homepage a bit
* Simplify table style overrides for docs tables
* Simplify docs typography for page titles and reading line length
* Stub out icons page
* Part of sidebar update, remove migration from nav.yml
* Move toc CSS to separate partial
* Change appearance of overview page
* fix sidebar arrow direction
* Add footer to docs layout
* Update descriptions
* Drop the .form-group class for margin utilities
* Remove lingering form-group-margin-bottom var
* improve footer spacing
* add headings to range page
* uncomment form range css
* Rename .custom-range to .form-range
* Drop unused docs var
* Uncomment the comment
* Remove unused variable
* Fix radio image sizing
* Reboot update: reset horizontal ul and ol padding
* de-dupe IDs
* tweak toc styles
* nvm, fix dropdown versions stuff
* remove sidebar nav toggle for now
* broken html
* fix more broken html, move css
* scss linting
* comment out broken helper docs
* scope styles
* scope styles
* Fixes #25540 and fixes #26407 for v5 only
* Update sidebar once more
* Match new sidenav order
* fix syntax error
* Rename custom-file to form-file, update paths, update migration docs for previous changes in #28696
* rename back
* fix size and alignment
* rename that back too
2019-07-12 23:52:33 +02:00
< table class = "table" >
2018-07-08 05:15:48 +02:00
< thead >
< tr >
< th > Size< / th >
< th > Class< / th >
< th > Modal max-width< / th >
< / tr >
< / thead >
< tbody >
< tr >
< td > Small< / td >
< td > < code > .modal-sm< / code > < / td >
< td > < code > 300px< / code > < / td >
< / tr >
< tr >
< td > Default< / td >
< td class = "text-muted" > None< / td >
< td > < code > 500px< / code > < / td >
< / tr >
< tr >
< td > Large< / td >
< td > < code > .modal-lg< / code > < / td >
< td > < code > 800px< / code > < / td >
< / tr >
< tr >
< td > Extra large< / td >
< td > < code > .modal-xl< / code > < / td >
< td > < code > 1140px< / code > < / td >
< / tr >
< / tbody >
< / table >
Our default modal without modifier class constitutes the "medium" size modal.
2016-12-24 23:04:44 +01:00
< div class = "bd-example" >
2016-05-17 15:14:07 +02:00
< button type = "button" class = "btn btn-primary" data-toggle = "modal" data-target = ".bd-example-modal-xl" > Extra large modal< / button >
2016-12-24 23:04:44 +01:00
< button type = "button" class = "btn btn-primary" data-toggle = "modal" data-target = ".bd-example-modal-lg" > Large modal< / button >
< button type = "button" class = "btn btn-primary" data-toggle = "modal" data-target = ".bd-example-modal-sm" > Small modal< / button >
< / div >
2019-01-08 17:33:28 +01:00
{{< highlight html > }}
2016-05-17 15:14:07 +02:00
<!-- Extra large modal -->
2018-09-03 17:55:04 +02:00
< button type = "button" class = "btn btn-primary" data-toggle = "modal" data-target = ".bd-example-modal-xl" > Extra large modal< / button >
2016-05-17 15:14:07 +02:00
< div class = "modal fade bd-example-modal-xl" tabindex = "-1" role = "dialog" aria-labelledby = "myExtraLargeModalLabel" aria-hidden = "true" >
2019-07-31 08:52:52 +02:00
< div class = "modal-dialog modal-xl" role = "document" >
2016-05-17 15:14:07 +02:00
< div class = "modal-content" >
...
< / div >
< / div >
< / div >
2016-12-24 23:04:44 +01:00
<!-- Large modal -->
2017-10-03 03:59:37 +02:00
< button type = "button" class = "btn btn-primary" data-toggle = "modal" data-target = ".bd-example-modal-lg" > Large modal< / button >
2016-12-24 23:04:44 +01:00
< div class = "modal fade bd-example-modal-lg" tabindex = "-1" role = "dialog" aria-labelledby = "myLargeModalLabel" aria-hidden = "true" >
2019-07-31 08:52:52 +02:00
< div class = "modal-dialog modal-lg" role = "document" >
2016-12-24 23:04:44 +01:00
< div class = "modal-content" >
...
< / div >
< / div >
< / div >
<!-- Small modal -->
< button type = "button" class = "btn btn-primary" data-toggle = "modal" data-target = ".bd-example-modal-sm" > Small modal< / button >
< div class = "modal fade bd-example-modal-sm" tabindex = "-1" role = "dialog" aria-labelledby = "mySmallModalLabel" aria-hidden = "true" >
2019-07-31 08:52:52 +02:00
< div class = "modal-dialog modal-sm" role = "document" >
2016-12-24 23:04:44 +01:00
< div class = "modal-content" >
...
< / div >
< / div >
< / div >
2019-01-08 17:33:28 +01:00
{{< / highlight > }}
2016-12-24 23:04:44 +01:00
2016-05-17 15:14:07 +02:00
< div class = "modal fade bd-example-modal-xl" tabindex = "-1" role = "dialog" aria-labelledby = "myExtraLargeModalLabel" aria-hidden = "true" >
2019-07-31 08:52:52 +02:00
< div class = "modal-dialog modal-xl" role = "document" >
2016-05-17 15:14:07 +02:00
< div class = "modal-content" >
< div class = "modal-header" >
2018-07-08 04:47:21 +02:00
< h5 class = "modal-title h4" id = "myExtraLargeModalLabel" > Extra large modal< / h5 >
2016-05-17 15:14:07 +02:00
< button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close" >
< span aria-hidden = "true" > × < / span >
< / button >
< / div >
< div class = "modal-body" >
...
< / div >
< / div >
< / div >
< / div >
2016-12-24 23:04:44 +01:00
< div class = "modal fade bd-example-modal-lg" tabindex = "-1" role = "dialog" aria-labelledby = "myLargeModalLabel" aria-hidden = "true" >
2019-07-31 08:52:52 +02:00
< div class = "modal-dialog modal-lg" role = "document" >
2016-12-24 23:04:44 +01:00
< div class = "modal-content" >
< div class = "modal-header" >
2018-04-02 13:55:58 +02:00
< h5 class = "modal-title h4" id = "myLargeModalLabel" > Large modal< / h5 >
2016-12-24 23:04:44 +01:00
< button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close" >
< span aria-hidden = "true" > × < / span >
< / button >
< / div >
< div class = "modal-body" >
...
< / div >
< / div >
< / div >
< / div >
< div class = "modal fade bd-example-modal-sm" tabindex = "-1" role = "dialog" aria-labelledby = "mySmallModalLabel" aria-hidden = "true" >
2019-07-31 08:52:52 +02:00
< div class = "modal-dialog modal-sm" role = "document" >
2016-12-24 23:04:44 +01:00
< div class = "modal-content" >
< div class = "modal-header" >
2018-04-02 13:55:58 +02:00
< h5 class = "modal-title h4" id = "mySmallModalLabel" > Small modal< / h5 >
2016-12-24 23:04:44 +01:00
< button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close" >
< span aria-hidden = "true" > × < / span >
< / button >
< / div >
< div class = "modal-body" >
...
< / div >
< / div >
< / div >
< / div >
2014-07-13 09:54:29 +02:00
## Usage
The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also adds `.modal-open` to the `<body>` to override default scrolling behavior and generates a `.modal-backdrop` to provide a click area for dismissing shown modals when clicking outside the modal.
### Via data attributes
Activate a modal without writing JavaScript. Set `data-toggle="modal"` on a controller element, like a button, along with a `data-target="#foo"` or `href="#foo"` to target a specific modal to toggle.
2014-03-17 03:03:53 +01:00
2019-01-08 17:33:28 +01:00
{{< highlight html > }}
2014-03-17 03:03:53 +01:00
< button type = "button" data-toggle = "modal" data-target = "#myModal" > Launch modal< / button >
2019-01-08 17:33:28 +01:00
{{< / highlight > }}
2014-03-17 03:03:53 +01:00
2014-07-13 09:54:29 +02:00
### Via JavaScript
2019-05-14 13:36:10 +02:00
Create a modal with a single line of JavaScript:
2014-07-13 09:54:29 +02:00
2019-05-14 13:36:10 +02:00
{{< highlight js > }}var myModal = new bootstrap.Modal(document.getElementById('myModal'), options){{< / highlight > }}
2014-07-13 09:54:29 +02:00
### Options
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-` , as in `data-backdrop=""` .
v5: Forms update (#28450)
* Initial spike of consolidated form checks
* Stub out forms rearrangement
- Prepping to drop non-custom file and range inputs
- Prepping to merge custom and native checks and radios (with switches)
- Prepping to merge custom select with form select
- Moving docs arround so forms has it's own area given volume of CSS
* Move input group Sass file to forms subdir
* Start to split and move the docs around
* Simpler imports
* Copyediting
* delete overview file
* Remove commented out code
* remove the custom-forms import
* rewrite flex-check as form-check, replace all custom properties
* Remove old forms doc
* stub out new subpage link section
* update migration guide
* Update nav, forms overview in page nav, and descriptions
* fix check bg position
* fix margin-top calculation
* rename .custom-select to .form-select
* Update validation styles for new checks
* add some vertical margin, fix inline checks
* fix docs examples
* better way to do this contents stuff, redo the toc while i'm at it
* page restyle for docs while here
* un-callout that, edit text
* redo padding on toc
* fix toc
* start to cleanup checks docs
* Rewrite Markdown tables into HTML
* Redesign tables, redo their docs
* Replace Open Iconic icons with custom Bootstrap icons
* Redesign the docs navbar, add a subheader, redo the sidebar
* Redesign docs homepage a bit
* Simplify table style overrides for docs tables
* Simplify docs typography for page titles and reading line length
* Stub out icons page
* Part of sidebar update, remove migration from nav.yml
* Move toc CSS to separate partial
* Change appearance of overview page
* fix sidebar arrow direction
* Add footer to docs layout
* Update descriptions
* Drop the .form-group class for margin utilities
* Remove lingering form-group-margin-bottom var
* improve footer spacing
* add headings to range page
* uncomment form range css
* Rename .custom-range to .form-range
* Drop unused docs var
* Uncomment the comment
* Remove unused variable
* Fix radio image sizing
* Reboot update: reset horizontal ul and ol padding
* de-dupe IDs
* tweak toc styles
* nvm, fix dropdown versions stuff
* remove sidebar nav toggle for now
* broken html
* fix more broken html, move css
* scss linting
* comment out broken helper docs
* scope styles
* scope styles
* Fixes #25540 and fixes #26407 for v5 only
* Update sidebar once more
* Match new sidenav order
* fix syntax error
* Rename custom-file to form-file, update paths, update migration docs for previous changes in #28696
* rename back
* fix size and alignment
* rename that back too
2019-07-12 23:52:33 +02:00
< table class = "table" >
2017-01-01 01:12:28 +01:00
< thead >
2017-04-28 00:57:10 +02:00
< tr >
< th style = "width: 100px;" > Name< / th >
< th style = "width: 50px;" > Type< / th >
< th style = "width: 50px;" > Default< / th >
< th > Description< / th >
< / tr >
2017-01-01 01:12:28 +01:00
< / thead >
< tbody >
2017-04-28 00:57:10 +02:00
< tr >
< td > backdrop< / td >
< td > boolean or the string < code > 'static'< / code > < / td >
< td > true< / td >
< td > Includes a modal-backdrop element. Alternatively, specify < code > static< / code > for a backdrop which doesn't close the modal on click.< / td >
< / tr >
< tr >
< td > keyboard< / td >
< td > boolean< / td >
< td > true< / td >
< td > Closes the modal when escape key is pressed< / td >
< / tr >
< tr >
< td > focus< / td >
< td > boolean< / td >
< td > true< / td >
< td > Puts the focus on the modal when initialized.< / td >
< / tr >
< tr >
< td > show< / td >
< td > boolean< / td >
< td > true< / td >
< td > Shows the modal when initialized.< / td >
< / tr >
2017-01-01 01:12:28 +01:00
< / tbody >
< / table >
2014-07-13 09:54:29 +02:00
### Methods
2019-01-08 17:33:28 +01:00
{{< callout danger > }}
{{< partial " callout-danger-async-methods . md " > }}
{{< / callout > }}
2017-03-28 23:43:16 +02:00
2019-05-14 13:36:10 +02:00
#### Passing options
2014-07-13 09:54:29 +02:00
Activates your content as a modal. Accepts an optional options `object` .
2019-01-08 17:33:28 +01:00
{{< highlight js > }}
2019-05-14 13:36:10 +02:00
var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
2014-03-17 03:03:53 +01:00
keyboard: false
})
2019-01-08 17:33:28 +01:00
{{< / highlight > }}
2014-03-17 03:03:53 +01:00
2019-05-14 13:36:10 +02:00
#### toggle
2014-07-13 09:54:29 +02:00
Manually toggles a modal. **Returns to the caller before the modal has actually been shown or hidden** (i.e. before the `shown.bs.modal` or `hidden.bs.modal` event occurs).
2019-05-14 13:36:10 +02:00
{{< highlight js > }}myModal.toggle(){{< / highlight > }}
2014-07-13 09:54:29 +02:00
2019-05-14 13:36:10 +02:00
#### show
2014-07-13 09:54:29 +02:00
Manually opens a modal. **Returns to the caller before the modal has actually been shown** (i.e. before the `shown.bs.modal` event occurs).
2019-05-14 13:36:10 +02:00
{{< highlight js > }}myModal.show(){{< / highlight > }}
2014-07-13 09:54:29 +02:00
2019-05-14 13:36:10 +02:00
#### hide
2014-07-13 09:54:29 +02:00
Manually hides a modal. **Returns to the caller before the modal has actually been hidden** (i.e. before the `hidden.bs.modal` event occurs).
2019-05-14 13:36:10 +02:00
{{< highlight js > }}myModal.hide(){{< / highlight > }}
2014-07-13 09:54:29 +02:00
2019-05-14 13:36:10 +02:00
#### handleUpdate
2017-03-23 22:22:09 +01:00
Manually readjust the modal's position if the height of a modal changes while it is open (i.e. in case a scrollbar appears).
2019-05-14 13:36:10 +02:00
{{< highlight js > }}myModal.handleUpdate(){{< / highlight > }}
2017-03-23 22:22:09 +01:00
2019-05-14 13:36:10 +02:00
#### dispose
2017-10-16 16:51:42 +02:00
Destroys an element's modal.
2019-05-14 13:36:10 +02:00
{{< highlight js > }}myModal.dispose(){{< / highlight > }}
2019-07-28 15:24:46 +02:00
#### getInstance
2019-05-14 13:36:10 +02:00
*Static* method which allows you to get the modal instance associated with a DOM element
{{< highlight js > }}
var myModalEl = document.getElementById('myModal')
2019-07-28 15:24:46 +02:00
var modal = bootstrap.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance
2019-05-14 13:36:10 +02:00
{{< / highlight > }}
2014-07-13 09:54:29 +02:00
### Events
2015-03-01 22:44:10 +01:00
Bootstrap's modal class exposes a few events for hooking into modal functionality. All modal events are fired at the modal itself (i.e. at the `<div class="modal">` ).
2014-07-13 09:54:29 +02:00
v5: Forms update (#28450)
* Initial spike of consolidated form checks
* Stub out forms rearrangement
- Prepping to drop non-custom file and range inputs
- Prepping to merge custom and native checks and radios (with switches)
- Prepping to merge custom select with form select
- Moving docs arround so forms has it's own area given volume of CSS
* Move input group Sass file to forms subdir
* Start to split and move the docs around
* Simpler imports
* Copyediting
* delete overview file
* Remove commented out code
* remove the custom-forms import
* rewrite flex-check as form-check, replace all custom properties
* Remove old forms doc
* stub out new subpage link section
* update migration guide
* Update nav, forms overview in page nav, and descriptions
* fix check bg position
* fix margin-top calculation
* rename .custom-select to .form-select
* Update validation styles for new checks
* add some vertical margin, fix inline checks
* fix docs examples
* better way to do this contents stuff, redo the toc while i'm at it
* page restyle for docs while here
* un-callout that, edit text
* redo padding on toc
* fix toc
* start to cleanup checks docs
* Rewrite Markdown tables into HTML
* Redesign tables, redo their docs
* Replace Open Iconic icons with custom Bootstrap icons
* Redesign the docs navbar, add a subheader, redo the sidebar
* Redesign docs homepage a bit
* Simplify table style overrides for docs tables
* Simplify docs typography for page titles and reading line length
* Stub out icons page
* Part of sidebar update, remove migration from nav.yml
* Move toc CSS to separate partial
* Change appearance of overview page
* fix sidebar arrow direction
* Add footer to docs layout
* Update descriptions
* Drop the .form-group class for margin utilities
* Remove lingering form-group-margin-bottom var
* improve footer spacing
* add headings to range page
* uncomment form range css
* Rename .custom-range to .form-range
* Drop unused docs var
* Uncomment the comment
* Remove unused variable
* Fix radio image sizing
* Reboot update: reset horizontal ul and ol padding
* de-dupe IDs
* tweak toc styles
* nvm, fix dropdown versions stuff
* remove sidebar nav toggle for now
* broken html
* fix more broken html, move css
* scss linting
* comment out broken helper docs
* scope styles
* scope styles
* Fixes #25540 and fixes #26407 for v5 only
* Update sidebar once more
* Match new sidenav order
* fix syntax error
* Rename custom-file to form-file, update paths, update migration docs for previous changes in #28696
* rename back
* fix size and alignment
* rename that back too
2019-07-12 23:52:33 +02:00
< table class = "table" >
2017-01-01 01:12:28 +01:00
< thead >
2017-04-28 00:57:10 +02:00
< tr >
v5: Forms update (#28450)
* Initial spike of consolidated form checks
* Stub out forms rearrangement
- Prepping to drop non-custom file and range inputs
- Prepping to merge custom and native checks and radios (with switches)
- Prepping to merge custom select with form select
- Moving docs arround so forms has it's own area given volume of CSS
* Move input group Sass file to forms subdir
* Start to split and move the docs around
* Simpler imports
* Copyediting
* delete overview file
* Remove commented out code
* remove the custom-forms import
* rewrite flex-check as form-check, replace all custom properties
* Remove old forms doc
* stub out new subpage link section
* update migration guide
* Update nav, forms overview in page nav, and descriptions
* fix check bg position
* fix margin-top calculation
* rename .custom-select to .form-select
* Update validation styles for new checks
* add some vertical margin, fix inline checks
* fix docs examples
* better way to do this contents stuff, redo the toc while i'm at it
* page restyle for docs while here
* un-callout that, edit text
* redo padding on toc
* fix toc
* start to cleanup checks docs
* Rewrite Markdown tables into HTML
* Redesign tables, redo their docs
* Replace Open Iconic icons with custom Bootstrap icons
* Redesign the docs navbar, add a subheader, redo the sidebar
* Redesign docs homepage a bit
* Simplify table style overrides for docs tables
* Simplify docs typography for page titles and reading line length
* Stub out icons page
* Part of sidebar update, remove migration from nav.yml
* Move toc CSS to separate partial
* Change appearance of overview page
* fix sidebar arrow direction
* Add footer to docs layout
* Update descriptions
* Drop the .form-group class for margin utilities
* Remove lingering form-group-margin-bottom var
* improve footer spacing
* add headings to range page
* uncomment form range css
* Rename .custom-range to .form-range
* Drop unused docs var
* Uncomment the comment
* Remove unused variable
* Fix radio image sizing
* Reboot update: reset horizontal ul and ol padding
* de-dupe IDs
* tweak toc styles
* nvm, fix dropdown versions stuff
* remove sidebar nav toggle for now
* broken html
* fix more broken html, move css
* scss linting
* comment out broken helper docs
* scope styles
* scope styles
* Fixes #25540 and fixes #26407 for v5 only
* Update sidebar once more
* Match new sidenav order
* fix syntax error
* Rename custom-file to form-file, update paths, update migration docs for previous changes in #28696
* rename back
* fix size and alignment
* rename that back too
2019-07-12 23:52:33 +02:00
< th style = "width: 150px;" > Event type< / th >
2017-04-28 00:57:10 +02:00
< th > Description< / th >
< / tr >
2017-01-01 01:12:28 +01:00
< / thead >
< tbody >
2017-04-28 00:57:10 +02:00
< tr >
< td > show.bs.modal< / td >
< td > This event fires immediately when the < code > show< / code > instance method is called. If caused by a click, the clicked element is available as the < code > relatedTarget< / code > property of the event.< / td >
< / tr >
< tr >
< td > shown.bs.modal< / td >
< td > This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the < code > relatedTarget< / code > property of the event.< / td >
< / tr >
< tr >
< td > hide.bs.modal< / td >
< td > This event is fired immediately when the < code > hide< / code > instance method has been called.< / td >
< / tr >
< tr >
< td > hidden.bs.modal< / td >
< td > This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).< / td >
< / tr >
2017-01-01 01:12:28 +01:00
< / tbody >
< / table >
2014-07-13 09:54:29 +02:00
2019-01-08 17:33:28 +01:00
{{< highlight js > }}
2019-05-14 13:36:10 +02:00
var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (e) {
2014-03-17 03:03:53 +01:00
// do something...
})
2019-01-08 17:33:28 +01:00
{{< / highlight > }}
