<metaname="description"content="Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.">
<metaname="author"content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<metaname="twitter:description"content="Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.">
<metaproperty="og:description"content="Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.">
<aclass="btn btn-sm btn-bd-light my-2 my-md-0"href="https://github.com/twbs/bootstrap/blob/v4-dev/site/docs/4.5/components/modal.md"title="View and edit this file on GitHub"target="_blank"rel="noopener">View on GitHub</a>
<pclass="bd-lead">Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.</p>
<li>Modals are built with HTML, CSS, and JavaScript. They’re positioned over everything else in the document and remove scroll from the <codeclass="language-plaintext highlighter-rouge"><body></code> so that modal content scrolls instead.</li>
<li>Modals use <codeclass="language-plaintext highlighter-rouge">position: fixed</code>, 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 <codeclass="language-plaintext highlighter-rouge">.modal</code> within another fixed element.</li>
<li>Once again, due to <codeclass="language-plaintext highlighter-rouge">position: fixed</code>, there are some caveats with using modals on mobile devices. <ahref="/docs/4.5/getting-started/browsers-devices/#modals-and-dropdowns-on-mobile">See our browser support docs</a> for details.</li>
<li>Due to how HTML5 defines its semantics, <ahref="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autofocus">the <codeclass="language-plaintext highlighter-rouge">autofocus</code> HTML attribute</a> has no effect in Bootstrap modals. To achieve the same effect, use some custom JavaScript:</li>
<p>The animation effect of this component is dependent on the <codeclass="language-plaintext highlighter-rouge">prefers-reduced-motion</code> media query. See the <ahref="/docs/4.5/getting-started/accessibility/#reduced-motion">reduced motion section of our accessibility documentation</a>.</p>
<p>Below is a <em>static</em> modal example (meaning its <codeclass="language-plaintext highlighter-rouge">position</code> and <codeclass="language-plaintext highlighter-rouge">display</code> have been overridden). Included are the modal header, modal body (required for <codeclass="language-plaintext highlighter-rouge">padding</code>), and modal footer (optional). We ask that you include modal headers with dismiss actions whenever possible, or provide another explicit dismiss action.</p>
<h3id="scrolling-long-content">Scrolling long content</h3>
<p>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.</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>
<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>You can also create a scrollable modal that allows scroll the modal body by adding <codeclass="language-plaintext highlighter-rouge">.modal-dialog-scrollable</code> to <codeclass="language-plaintext highlighter-rouge">.modal-dialog</code>.</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>
<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>Add <codeclass="language-plaintext highlighter-rouge">.modal-dialog-centered</code> to <codeclass="language-plaintext highlighter-rouge">.modal-dialog</code> to vertically center the modal.</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>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>
<h3id="tooltips-and-popovers">Tooltips and popovers</h3>
<p><ahref="/docs/4.5/components/tooltips/">Tooltips</a> and <ahref="/docs/4.5/components/popovers/">popovers</a> can be placed within modals as needed. When modals are closed, any tooltips and popovers within are also automatically dismissed.</p>
<p>This <ahref="#"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>
<hr/>
<h5>Tooltips in a modal</h5>
<p><ahref="#"class="tooltip-test"title="Tooltip"data-container="#exampleModalPopovers">This link</a> and <ahref="#"class="tooltip-test"title="Tooltip"data-container="#exampleModalPopovers">that link</a> have tooltips on hover.</p>
<spanclass="nt"><h5></span>Popover in a modal<spanclass="nt"></h5></span>
<spanclass="nt"><p></span>This <spanclass="nt"><a</span><spanclass="na">href=</span><spanclass="s">"#"</span><spanclass="na">role=</span><spanclass="s">"button"</span><spanclass="na">class=</span><spanclass="s">"btn btn-secondary popover-test"</span><spanclass="na">title=</span><spanclass="s">"Popover title"</span><spanclass="na">data-content=</span><spanclass="s">"Popover body content is set in this attribute."</span><spanclass="nt">></span>button<spanclass="nt"></a></span> triggers a popover on click.<spanclass="nt"></p></span>
<spanclass="nt"><hr></span>
<spanclass="nt"><h5></span>Tooltips in a modal<spanclass="nt"></h5></span>
<spanclass="nt"><p><a</span><spanclass="na">href=</span><spanclass="s">"#"</span><spanclass="na">class=</span><spanclass="s">"tooltip-test"</span><spanclass="na">title=</span><spanclass="s">"Tooltip"</span><spanclass="nt">></span>This link<spanclass="nt"></a></span> and <spanclass="nt"><a</span><spanclass="na">href=</span><spanclass="s">"#"</span><spanclass="na">class=</span><spanclass="s">"tooltip-test"</span><spanclass="na">title=</span><spanclass="s">"Tooltip"</span><spanclass="nt">></span>that link<spanclass="nt"></a></span> have tooltips on hover.<spanclass="nt"></p></span>
<p>Utilize the Bootstrap grid system within a modal by nesting <codeclass="language-plaintext highlighter-rouge">.container-fluid</code> within the <codeclass="language-plaintext highlighter-rouge">.modal-body</code>. Then, use the normal grid system classes as you would anywhere else.</p>
<p>Have a bunch of buttons that all trigger the same modal with slightly different contents? Use <codeclass="language-plaintext highlighter-rouge">event.relatedTarget</code> and <ahref="https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes">HTML <codeclass="language-plaintext highlighter-rouge">data-*</code> attributes</a> (possibly <ahref="https://api.jquery.com/data/">via jQuery</a>) to vary the contents of the modal depending on which button was clicked.</p>
<p>Below is a live demo followed by example HTML and JavaScript. For more information, <ahref="#events">read the modal events docs</a> for details on <codeclass="language-plaintext highlighter-rouge">relatedTarget</code>.</p>
<buttontype="button"class="btn btn-primary"data-toggle="modal"data-target="#exampleModal"data-whatever="@mdo">Open modal for @mdo</button>
<buttontype="button"class="btn btn-primary"data-toggle="modal"data-target="#exampleModal"data-whatever="@fat">Open modal for @fat</button>
<buttontype="button"class="btn btn-primary"data-toggle="modal"data-target="#exampleModal"data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
<figureclass="highlight"><pre><codeclass="language-html"data-lang="html"><spanclass="nt"><button</span><spanclass="na">type=</span><spanclass="s">"button"</span><spanclass="na">class=</span><spanclass="s">"btn btn-primary"</span><spanclass="na">data-toggle=</span><spanclass="s">"modal"</span><spanclass="na">data-target=</span><spanclass="s">"#exampleModal"</span><spanclass="na">data-whatever=</span><spanclass="s">"@mdo"</span><spanclass="nt">></span>Open modal for @mdo<spanclass="nt"></button></span>
<spanclass="nt"><button</span><spanclass="na">type=</span><spanclass="s">"button"</span><spanclass="na">class=</span><spanclass="s">"btn btn-primary"</span><spanclass="na">data-toggle=</span><spanclass="s">"modal"</span><spanclass="na">data-target=</span><spanclass="s">"#exampleModal"</span><spanclass="na">data-whatever=</span><spanclass="s">"@fat"</span><spanclass="nt">></span>Open modal for @fat<spanclass="nt"></button></span>
<spanclass="nt"><button</span><spanclass="na">type=</span><spanclass="s">"button"</span><spanclass="na">class=</span><spanclass="s">"btn btn-primary"</span><spanclass="na">data-toggle=</span><spanclass="s">"modal"</span><spanclass="na">data-target=</span><spanclass="s">"#exampleModal"</span><spanclass="na">data-whatever=</span><spanclass="s">"@getbootstrap"</span><spanclass="nt">></span>Open modal for @getbootstrap<spanclass="nt"></button></span>
<spanclass="kd">var</span><spanclass="nx">button</span><spanclass="o">=</span><spanclass="nx">$</span><spanclass="p">(</span><spanclass="nx">event</span><spanclass="p">.</span><spanclass="nx">relatedTarget</span><spanclass="p">)</span><spanclass="c1">// Button that triggered the modal</span>
<spanclass="kd">var</span><spanclass="nx">recipient</span><spanclass="o">=</span><spanclass="nx">button</span><spanclass="p">.</span><spanclass="nx">data</span><spanclass="p">(</span><spanclass="dl">'</span><spanclass="s1">whatever</span><spanclass="dl">'</span><spanclass="p">)</span><spanclass="c1">// Extract info from data-* attributes</span>
<spanclass="c1">// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).</span>
<spanclass="c1">// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.</span>
<spanclass="nx">modal</span><spanclass="p">.</span><spanclass="nx">find</span><spanclass="p">(</span><spanclass="dl">'</span><spanclass="s1">.modal-title</span><spanclass="dl">'</span><spanclass="p">).</span><spanclass="nx">text</span><spanclass="p">(</span><spanclass="dl">'</span><spanclass="s1">New message to </span><spanclass="dl">'</span><spanclass="o">+</span><spanclass="nx">recipient</span><spanclass="p">)</span>
<p>The <codeclass="language-plaintext highlighter-rouge">$modal-fade-transform</code> variable determines the transform state of <codeclass="language-plaintext highlighter-rouge">.modal-dialog</code> before the modal fade-in animation, the <codeclass="language-plaintext highlighter-rouge">$modal-show-transform</code> variable determines the transform of <codeclass="language-plaintext highlighter-rouge">.modal-dialog</code> at the end of the modal fade-in animation.</p>
<p>If you want for example a zoom-in animation, you can set <codeclass="language-plaintext highlighter-rouge">$modal-fade-transform: scale(.8)</code>.</p>
<p>For modals that simply appear rather than fade in to view, remove the <codeclass="language-plaintext highlighter-rouge">.fade</code> class from your modal markup.</p>
<p>If the height of a modal changes while it is open, you should call <codeclass="language-plaintext highlighter-rouge">$('#myModal').modal('handleUpdate')</code> to readjust the modal’s position in case a scrollbar appears.</p>
<p>Be sure to add <codeclass="language-plaintext highlighter-rouge">aria-labelledby="..."</code>, referencing the modal title, to <codeclass="language-plaintext highlighter-rouge">.modal</code>. Additionally, you may give a description of your modal dialog with <codeclass="language-plaintext highlighter-rouge">aria-describedby</code> on <codeclass="language-plaintext highlighter-rouge">.modal</code>. Note that you don’t need to add <codeclass="language-plaintext highlighter-rouge">role="dialog"</code> since we already add it via JavaScript.</p>
<p>Embedding YouTube videos in modals requires additional JavaScript not in Bootstrap to automatically stop playback and more. <ahref="https://stackoverflow.com/questions/18622508/bootstrap-3-and-youtube-in-modal">See this helpful Stack Overflow post</a> for more information.</p>
<p>Modals have three optional sizes, available via modifier classes to be placed on a <codeclass="language-plaintext highlighter-rouge">.modal-dialog</code>. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.</p>
<p>The modal plugin toggles your hidden content on demand, via data attributes or JavaScript. It also adds <codeclass="language-plaintext highlighter-rouge">.modal-open</code> to the <codeclass="language-plaintext highlighter-rouge"><body></code> to override default scrolling behavior and generates a <codeclass="language-plaintext highlighter-rouge">.modal-backdrop</code> to provide a click area for dismissing shown modals when clicking outside the modal.</p>
<p>Activate a modal without writing JavaScript. Set <codeclass="language-plaintext highlighter-rouge">data-toggle="modal"</code> on a controller element, like a button, along with a <codeclass="language-plaintext highlighter-rouge">data-target="#foo"</code> or <codeclass="language-plaintext highlighter-rouge">href="#foo"</code> to target a specific modal to toggle.</p>
<p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <codeclass="language-plaintext highlighter-rouge">data-</code>, as in <codeclass="language-plaintext highlighter-rouge">data-backdrop=""</code>.</p>
<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>
</tbody>
</table>
<h3id="methods">Methods</h3>
<divclass="bd-callout bd-callout-danger">
<h4id="asynchronous-methods-and-transitions">Asynchronous methods and transitions</h4>
<p>All API methods are <strong>asynchronous</strong> and start a <strong>transition</strong>. They return to the caller as soon as the transition is started but <strong>before it ends</strong>. In addition, a method call on a <strong>transitioning component will be ignored</strong>.</p>
<p><ahref="/docs/4.5/getting-started/javascript/#asynchronous-functions-and-transitions">See our JavaScript documentation for more information</a>.</p>
<p>Manually toggles a modal. <strong>Returns to the caller before the modal has actually been shown or hidden</strong> (i.e. before the <codeclass="language-plaintext highlighter-rouge">shown.bs.modal</code> or <codeclass="language-plaintext highlighter-rouge">hidden.bs.modal</code> event occurs).</p>
<p>Manually opens a modal. <strong>Returns to the caller before the modal has actually been shown</strong> (i.e. before the <codeclass="language-plaintext highlighter-rouge">shown.bs.modal</code> event occurs).</p>
<p>Manually hides a modal. <strong>Returns to the caller before the modal has actually been hidden</strong> (i.e. before the <codeclass="language-plaintext highlighter-rouge">hidden.bs.modal</code> event occurs).</p>
<p>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 <codeclass="language-plaintext highlighter-rouge"><div class="modal"></code>).</p>
<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>
<tr>
<td>hidePrevented.bs.modal</td>
<td>This event is fired when the modal is shown, its backdrop is <code>static</code> and a click outside the modal or an escape key press is performed with the keyboard option or <code>data-keyboard</code> set to <code>false</code>.</td>
