Skip to content
GitLab
Switch branch/tag
Find file Normal viewHistoryPermalink
modal.md 26.7 KB
Newer Older
Mark Otto's avatar
frontmatter all that shit    
Mark Otto committed
1 
---
Mark Otto's avatar
Massive cleanup    
Mark Otto committed
2 
layout: docs
Mark Otto's avatar
frontmatter all that shit    
Mark Otto committed
3 
title: Modal
Mark Otto's avatar
v4: Social meta tags (#20825)    
Mark Otto committed
4 
description: Learn how to use Bootstrap's modals to add dialog prompts to your site.
Mark Otto's avatar
restore page headers, use partial and page frontmatter to organize it    
Mark Otto committed
5 
group: components
Mark Otto's avatar
frontmatter all that shit    
Mark Otto committed
6
7 
---
Mark Otto's avatar
started fixing nested .bd-example stuff, then rewrote the modal docs    
Mark Otto committed
8 
Modals are streamlined, but flexible dialog prompts powered by JavaScript. They support a number of use cases from user notification to completely custom content and feature a handful of helpful subcomponents, sizes, and more.
Mark Otto's avatar
Break up docs into includes  
Mark Otto committed
9
Mark Otto's avatar
add markdown toc stuff    
Mark Otto committed
10
11
12
13
14 
## Contents

* Will be replaced with the ToC, excluding the "Contents" header
{:toc}
Mark Otto's avatar
started fixing nested .bd-example stuff, then rewrote the modal docs    
Mark Otto committed
15 
## How it works
Mark Otto's avatar
Merge branch 'master' into v4    
Mark Otto committed
16
Mark Otto's avatar
started fixing nested .bd-example stuff, then rewrote the modal docs    
Mark Otto committed
17 
Before getting started with Bootstrap's modal component, be sure to read the following as our menu options have recently changed.
Mark Otto's avatar
Merge branch 'master' into derp    
Mark Otto committed
18
Mark Otto's avatar
started fixing nested .bd-example stuff, then rewrote the modal docs    
Mark Otto committed
19
20
21 
- 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.
Quy's avatar
Doc updates (#21542)    
Quy committed
22 
- 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.
Sam Rapaport's avatar
Fix spelling error.    
Sam Rapaport committed
23 
- Once again, due to `position: fixed`, there are some caveats with using modals on mobile devices. [See our browser support docs]({{ site.baseurl }}/getting-started/browsers-devices/#modals-and-dropdowns-on-mobile) for details.
Matt Eason's avatar
Change 'has no affect' to 'has no effect'    
Matt Eason committed
24 
- Lastly, the `autofocus` HTML attribute has no effect in modals. Here's how you can achieve the same effect with custom JavaScript.
Mark Otto's avatar
Redo all our callouts with the custom callout plugin    
Mark Otto committed
25
Mark Otto's avatar
started fixing nested .bd-example stuff, then rewrote the modal docs    
Mark Otto committed
26 
Keep reading for demos and usage guidelines.
Mark Otto's avatar
Redo all our callouts with the custom callout plugin    
Mark Otto committed
27
28
Mark Otto's avatar
started fixing nested .bd-example stuff, then rewrote the modal docs    
Mark Otto committed
29 
- 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:
Mark Otto's avatar
Redo all our callouts with the custom callout plugin    
Mark Otto committed
30
Mark Otto's avatar
started fixing nested .bd-example stuff, then rewrote the modal docs    
Mark Otto committed
31
32
33
34
35 
{% highlight js %}
$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').focus()
})
{% endhighlight %}
Mark Otto's avatar
Redo all our callouts with the custom callout plugin    
Mark Otto committed
36
Mark Otto's avatar
started fixing nested .bd-example stuff, then rewrote the modal docs    
Mark Otto committed
37 
## Examples
Mark Otto's avatar
Break up docs into includes  
Mark Otto committed
38
Mark Otto's avatar
started fixing nested .bd-example stuff, then rewrote the modal docs    
Mark Otto committed
39 
### Modal components
Mark Otto's avatar
markdownify js modal    
Mark Otto committed
40
Mark Otto's avatar
started fixing nested .bd-example stuff, then rewrote the modal docs    
Mark Otto committed
41 
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.
Mark Otto's avatar
markdownify js modal    
Mark Otto committed
42
Mark Otto's avatar
rename classes from .bs-docs and .bs to .bd    
Mark Otto committed
43 
<div class="bd-example bd-example-modal">
Mark Otto's avatar
markdownify js modal    
Mark Otto committed
44 
  <div class="modal">
Mark Otto's avatar
Merge branch 'master' into v4    
Mark Otto committed
45 
    <div class="modal-dialog" role="document">
Mark Otto's avatar
markdownify js modal    
Mark Otto committed
46
47 
      <div class="modal-content">
        <div class="modal-header">
Mark Otto's avatar
flex the modal header so we can remove custom styles    
Mark Otto committed
48 
          <h5 class="modal-title">Modal title</h5>
Mark Otto's avatar
Merge branch 'master' into v4    
Mark Otto committed
49
50
51 
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
Mark Otto's avatar
markdownify js modal    
Mark Otto committed
52
53 
        </div>
        <div class="modal-body">
Mark Otto's avatar
started fixing nested .bd-example stuff, then rewrote the modal docs    
Mark Otto committed
54 
          <p>Modal body text goes here.</p>
Mark Otto's avatar
markdownify js modal    
Mark Otto committed
55
56
57
58
59 
        </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>
Mark Otto's avatar
started fixing nested .bd-example stuff, then rewrote the modal docs    
Mark Otto committed
60
61
62 
      </div>
    </div>
  </div>
Mark Otto's avatar
markdownify js modal    
Mark Otto committed
63 
</div>
Mark Otto's avatar
Break up docs into includes  
Mark Otto committed
64
65
66 

{% highlight html %}
<div class="modal fade">
Mark Otto's avatar
Merge branch 'master' into v4    
Mark Otto committed
67 
  <div class="modal-dialog" role="document">
Mark Otto's avatar
Break up docs into includes  
Mark Otto committed
68
69 
    <div class="modal-content">
      <div class="modal-header">
Mark Otto's avatar
flex the modal header so we can remove custom styles    
Mark Otto committed
70 
        <h5 class="modal-title">Modal title</h5>
Mark Otto's avatar
Merge branch 'master' into v4    
Mark Otto committed
71
72
73 
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
Mark Otto's avatar
Break up docs into includes  
Mark Otto committed
74
75 
      </div>
      <div class="modal-body">
Mark Otto's avatar
started fixing nested .bd-example stuff, then rewrote the modal docs    
Mark Otto committed
76 
        <p>Modal body text goes here.</p>
Mark Otto's avatar
Break up docs into includes  
Mark Otto committed
77
78
79 
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
Mark Otto's avatar
started fixing nested .bd-example stuff, then rewrote the modal docs    
Mark Otto committed
80 
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
Mark Otto's avatar
Break up docs into includes  
Mark Otto committed
81 
      </div>
Mark Otto's avatar
started fixing nested .bd-example stuff, then rewrote the modal docs    
Mark Otto committed
82
83
84 
    </div>
  </div>
</div>
Mark Otto's avatar
Break up docs into includes  
Mark Otto committed
85
86 
{% endhighlight %}
Mark Otto's avatar
markdownify js modal    
Mark Otto committed
87 
### Live demo
Mark Otto's avatar
Break up docs into includes  
Mark Otto committed
88
Mark Otto's avatar
started fixing nested .bd-example stuff, then rewrote the modal docs    
Mark Otto committed
89 
Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page.
Mark Otto's avatar
Break up docs into includes  
Mark Otto committed
90
Mark Otto's avatar
dedupe    
Mark Otto committed
91 
<div id="exampleModalLive" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLiveLabel" aria-hidden="true">
Mark Otto's avatar
Merge branch 'master' into v4    
Mark Otto committed
92 
  <div class="modal-dialog" role="document">
Mark Otto's avatar
markdownify js modal    
Mark Otto committed
93
94 
    <div class="modal-content">
      <div class="modal-header">
Mark Otto's avatar
flex the modal header so we can remove custom styles    
Mark Otto committed
95 
        <h5 class="modal-title" id="exampleModalLiveLabel">Modal title</h5>
Mark Otto's avatar
Merge branch 'master' into v4    
Mark Otto committed
96
97
98 
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
Mark Otto's avatar
markdownify js modal    
Mark Otto committed
99
100 
      </div>
      <div class="modal-body">
Mark Otto's avatar
started fixing nested .bd-example stuff, then rewrote the modal docs    
Mark Otto committed
101 
        <p>Woohoo, you're reading this text in a modal!</p>
Mark Otto's avatar
markdownify js modal    
Mark Otto committed
102
103
104
105
106 
      </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>
Mark Otto's avatar
started fixing nested .bd-example stuff, then rewrote the modal docs    
Mark Otto committed
107
108 
    </div>
  </div>
Mark Otto's avatar
markdownify js modal    
Mark Otto committed
109
110 
</div>
Mark Otto's avatar
started fixing nested .bd-example stuff, then rewrote the modal docs    
Mark Otto committed
111 
<div class="bd-example">
Mark Otto's avatar
dedupe    
Mark Otto committed
112 
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLive">
Mark Otto's avatar
markdownify js modal    
Mark Otto committed
113
114
115 
    Launch demo modal
  </button>
</div>
Mark Otto's avatar
Break up docs into includes  
Mark Otto committed
116
117
118 

{% highlight html %}
<!-- Button trigger modal -->
Mark Otto's avatar
started fixing nested .bd-example stuff, then rewrote the modal docs    
Mark Otto committed
119 
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Mark Otto's avatar
Break up docs into includes  
Mark Otto committed
120
121
122
123 
  Launch demo modal
</button>

<!-- Modal -->
Pierre-Denis Vanduynslager's avatar
Fix modal id in doc    
Pierre-Denis Vanduynslager committed
124 
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
Mark Otto's avatar
Merge branch 'master' into v4    
Mark Otto committed
125 
  <div class="modal-dialog" role="document">
Mark Otto's avatar
Break up docs into includes  
Mark Otto committed
126
127 
    <div class="modal-content">
      <div class="modal-header">
Mark Otto's avatar
flex the modal header so we can remove custom styles    
Mark Otto committed
128 
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
Mark Otto's avatar
Merge branch 'master' into v4    
Mark Otto committed
129
130
131 
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
Mark Otto's avatar
Break up docs into includes  
Mark Otto committed
132
133
134
135
136 
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
Mark Otto's avatar
.btn-default to .btn-secondary    
Mark Otto committed
137 
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
Mark Otto's avatar
Break up docs into includes  
Mark Otto committed
138
139
140
141
142
143
144 
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
{% endhighlight %}
Mark Otto's avatar
started fixing nested .bd-example stuff, then rewrote the modal docs    
Mark Otto committed
145 
### Scrolling long content
Mark Otto's avatar
Break up docs into includes  
Mark Otto committed
146
Mark Otto's avatar
started fixing nested .bd-example stuff, then rewrote the modal docs    
Mark Otto committed
147 
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.
Mark Otto's avatar
Break up docs into includes  
Mark Otto committed
148
Mark Otto's avatar
started fixing nested .bd-example stuff, then rewrote the modal docs    
Mark Otto committed
149
150 
<div id="exampleModalLong" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
Mark Otto's avatar
Break up docs into includes  
Mark Otto committed
151 
    <div class="modal-content">
Mark Otto's avatar
started fixing nested .bd-example stuff, then rewrote the modal docs    
Mark Otto committed
152 
      <div class="modal-header">
Mark Otto's avatar
flex the modal header so we can remove custom styles    
Mark Otto committed
153 
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
Mark Otto's avatar
started fixing nested .bd-example stuff, then rewrote the modal docs    
Mark Otto committed
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181 
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</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>
Mark Otto's avatar
Break up docs into includes  
Mark Otto committed
182
183
184
185 
    </div>
  </div>
</div>
Mark Otto's avatar
started fixing nested .bd-example stuff, then rewrote the modal docs    
Mark Otto committed
186
187
188
189 
<div class="bd-example">
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
    Launch demo modal
  </button>
Mark Otto's avatar
Break up docs into includes  
Mark Otto committed
190
191 
</div>
Mark Otto's avatar
started fixing nested .bd-example stuff, then rewrote the modal docs    
Mark Otto committed
192
193
194
195
196 
{% highlight html %}
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
  Launch demo modal
</button>
Mark Otto's avatar
Break up docs into includes  
Mark Otto committed
197
Mark Otto's avatar
started fixing nested .bd-example stuff, then rewrote the modal docs    
Mark Otto committed
198
199
200
201 
<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
Mark Otto's avatar
markdownify js modal    
Mark Otto committed
202 
      <div class="modal-header">
Mark Otto's avatar
flex the modal header so we can remove custom styles    
Mark Otto committed
203 
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
Mark Otto's avatar
Merge branch 'master' into v4    
Mark Otto committed
204
205
206 
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
Mark Otto's avatar
markdownify js modal    
Mark Otto committed
207
208
209
210 
      </div>
      <div class="modal-body">
        ...
      </div>
Mark Otto's avatar
started fixing nested .bd-example stuff, then rewrote the modal docs    
Mark Otto committed
211
212
213
214 
      <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>
Mark Otto's avatar
markdownify js modal    
Mark Otto committed
215
216
217 
    </div>
  </div>
</div>
Mark Otto's avatar
started fixing nested .bd-example stuff, then rewrote the modal docs    
Mark Otto committed
218 
{% endhighlight %}
Mark Otto's avatar
Break up docs into includes  
Mark Otto committed
219
Mark Otto's avatar
started fixing nested .bd-example stuff, then rewrote the modal docs    
Mark Otto committed
220 
### Tooltips and popovers
Mark Otto's avatar
markdownify js modal    
Mark Otto committed
221
Mark Otto's avatar
started fixing nested .bd-example stuff, then rewrote the modal docs    
Mark Otto committed
222
223
224
225
226 
[Tooltips]({{ site.baseurl }}/components/tooltips/) and [popovers]({{ site.baseurl }}/components/popovers/) can be placed within modals as needed. When modals are closed, any tooltips and popovers within are also automatically dismissed.

<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">
Mark Otto's avatar
markdownify js modal    
Mark Otto committed
227 
      <div class="modal-header">
Mark Otto's avatar
flex the modal header so we can remove custom styles    
Mark Otto committed
228 
        <h5 class="modal-title" id="exampleModalPopoversLabel">Modal title</h5>
Mark Otto's avatar
Merge branch 'master' into v4    
Mark Otto committed
229
230
231 
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
Mark Otto's avatar
markdownify js modal    
Mark Otto committed
232
233 
      </div>
      <div class="modal-body">
Mark Otto's avatar
started fixing nested .bd-example stuff, then rewrote the modal docs    
Mark Otto committed
234
235
236
237
238
239
240
241
242 
        <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>
      </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>
Mark Otto's avatar
markdownify js modal    
Mark Otto committed
243
244
245
246
247 
      </div>
    </div>
  </div>
</div>
Mark Otto's avatar
started fixing nested .bd-example stuff, then rewrote the modal docs    
Mark Otto committed
248
249
250
251
252 
<div class="bd-example">
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalPopovers">
    Launch demo modal
  </button>
</div>
Mark Otto's avatar
Break up docs into includes  
Mark Otto committed
253
254 

{% highlight html %}
Mark Otto's avatar
started fixing nested .bd-example stuff, then rewrote the modal docs    
Mark Otto committed
255
256
257
258
259
260 
<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>
Mark Otto's avatar
Break up docs into includes  
Mark Otto committed
261
262
263 
</div>
{% endhighlight %}
Mark Otto's avatar
started fixing nested .bd-example stuff, then rewrote the modal docs    
Mark Otto committed
264 
### Using the grid
Mark Otto's avatar
Merge branch 'master' into v4    
Mark Otto committed
265
Mark Otto's avatar
started fixing nested .bd-example stuff, then rewrote the modal docs    
Mark Otto committed
266 
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.
Mark Otto's avatar
Merge branch 'master' into v4    
Mark Otto committed
267
268 

<div id="gridSystemModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridModalLabel" aria-hidden="true">
Mark Otto's avatar
Merge branch 'master' into v4    
Mark Otto committed
269 
  <div class="modal-dialog" role="document">
Mark Otto's avatar
Merge branch 'master' into v4    
Mark Otto committed
270
271 
    <div class="modal-content">
      <div class="modal-header">
Mark Otto's avatar
started fixing nested .bd-example stuff, then rewrote the modal docs    
Mark Otto committed
272 
        <h5 class="modal-title" id="gridModalLabel">Grids in modals</h5>
Mark Otto's avatar
flex the modal header so we can remove custom styles    
Mark Otto committed
273 
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
Mark Otto's avatar
Merge branch 'master' into v4    
Mark Otto committed
274
275 
      </div>
      <div class="modal-body">
petetnt's avatar
modal.md - wrapped rows to a .container-fluid, added .bd-example-row for better visualization    
petetnt committed
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291 
        <div class="container-fluid bd-example-row">
          <div class="row">
            <div class="col-md-4">.col-md-4</div>
            <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
          </div>
          <div class="row">
            <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
            <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
          </div>
          <div class="row">
            <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
          </div>
          <div class="row">
            <div class="col-sm-9">
              Level 1: .col-sm-9
              <div class="row">
Eric Nolte's avatar
Update docs to reflect new breakpoint naming convention    
Eric Nolte committed
292
293 
                <div class="col-8 col-sm-6">
                  Level 2: .col-8 .col-sm-6
petetnt's avatar
modal.md - wrapped rows to a .container-fluid, added .bd-example-row for better visualization    
petetnt committed
294 
                </div>
Eric Nolte's avatar
Update docs to reflect new breakpoint naming convention    
Eric Nolte committed
295
296 
                <div class="col-4 col-sm-6">
                  Level 2: .col-4 .col-sm-6
petetnt's avatar
modal.md - wrapped rows to a .container-fluid, added .bd-example-row for better visualization    
petetnt committed
297 
                </div>
Mark Otto's avatar
Merge branch 'master' into v4    
Mark Otto committed
298
299
300
301
302
303 
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
Rodrigo Castro's avatar
Fixes #20897 - Changed btn-default for btn-secondary on V4's Modal documentation page    
Rodrigo Castro committed
304 
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
Mark Otto's avatar
Merge branch 'master' into v4    
Mark Otto committed
305
306
307
308
309 
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
Mark Otto's avatar
started fixing nested .bd-example stuff, then rewrote the modal docs    
Mark Otto committed
310
311
312
313
314 

<div class="bd-example">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#gridSystemModal">
  Launch demo modal
</button>
Mark Otto's avatar
Merge branch 'master' into v4    
Mark Otto committed
315
316 
</div>
Mark Otto's avatar
started fixing nested .bd-example stuff, then rewrote the modal docs    
Mark Otto committed
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349 
{% highlight html %}
<div class="modal-body">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-4">.col-md-4</div>
      <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
    </div>
    <div class="row">
      <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
      <div class="col-md-2 col-md-offset-4">.col-md-2 .col-md-offset-4</div>
    </div>
    <div class="row">
      <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
    </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>
{% endhighlight %}

### Varying modal content
Bardi Harborow's avatar
Fix broken links.    
Bardi Harborow committed
350 
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) (possibly [via jQuery](https://api.jquery.com/data/)) to vary the contents of the modal depending on which button was clicked.
Mark Otto's avatar
Merge branch 'master' into derp    
Mark Otto committed
351
Mark Otto's avatar
started fixing nested .bd-example stuff, then rewrote the modal docs    
Mark Otto committed
352 
Below is a live demo followed by example HTML and JavaScript. For more information, [read the modal events docs](#events) for details on `relatedTarget`.
Mark Otto's avatar
Merge branch 'master' into derp    
Mark Otto committed
353
Mark Otto's avatar
Merge branch 'master' into v4    
Mark Otto committed
354 
{% example html %}
Mark Otto's avatar
started fixing nested .bd-example stuff, then rewrote the modal docs    
Mark Otto committed
355
356
357
358
359
360
361
362 
<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">
Mark Otto's avatar
flex the modal header so we can remove custom styles    
Mark Otto committed
363 
        <h5 class="modal-title" id="exampleModalLabel">New message</h5>
Mark Otto's avatar
started fixing nested .bd-example stuff, then rewrote the modal docs    
Mark Otto committed
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382 
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="form-control-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="form-control-label">Message:</label>
            <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>
Mark Otto's avatar
Merge branch 'master' into derp    
Mark Otto committed
383
384
385
386 
      </div>
    </div>
  </div>
</div>
Mark Otto's avatar
Merge branch 'master' into v4    
Mark Otto committed
387 
{% endexample %}
Mark Otto's avatar
Merge branch 'master' into derp    
Mark Otto committed
388
389
390
391
392
393
394
395
396
397
398
399
400 

{% highlight js %}
$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})
{% endhighlight %}
Mark Otto's avatar
started fixing nested .bd-example stuff, then rewrote the modal docs    
Mark Otto committed
401
402
403
404
405
406
407
408
409
410
411 
### Remove animation

For modals that simply appear rather than fade in to view, remove the `.fade` class from your modal markup.

{% highlight html %}
<div class="modal" tabindex="-1" role="dialog" aria-labelledby="..." aria-hidden="true">
  ...
</div>
{% endhighlight %}

### Dynamic heights
Mark Otto's avatar
Merge branch 'master' into v4    
Mark Otto committed
412
Johann's avatar
Fix Modal documentation about _handleUpdate method + move to public scope (#21877)    
Johann committed
413 
If the height of a modal changes while it is open, you should call `$('#myModal').data('bs.modal').handleUpdate()` or `$('#myModal').modal('handleUpdate')` to readjust the modal's position in case a scrollbar appears.
Mark Otto's avatar
Merge branch 'master' into v4    
Mark Otto committed
414
Mark Otto's avatar
started fixing nested .bd-example stuff, then rewrote the modal docs    
Mark Otto committed
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460 
### 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

Modals have two 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.

<div class="bd-example">
  <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>

{% highlight html %}
<!-- Large modal -->
<button class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>

<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <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">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>
{% endhighlight %}

<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">

      <div class="modal-header">
Mark Otto's avatar
flex the modal header so we can remove custom styles    
Mark Otto committed
461 
        <h4 class="modal-title" id="myLargeModalLabel">Large modal</h4>
Mark Otto's avatar
started fixing nested .bd-example stuff, then rewrote the modal docs    
Mark Otto committed
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476 
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</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">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
Mark Otto's avatar
flex the modal header so we can remove custom styles    
Mark Otto committed
477 
        <h4 class="modal-title" id="mySmallModalLabel">Small modal</h4>
Mark Otto's avatar
started fixing nested .bd-example stuff, then rewrote the modal docs    
Mark Otto committed
478
479
480
481
482
483
484
485
486
487
488 
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
    </div>
  </div>
</div>
Mark Otto's avatar
markdownify js modal    
Mark Otto committed
489
490
491
492
493
494
495 
## 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.
Mark Otto's avatar
Break up docs into includes  
Mark Otto committed
496
497
498
499
500 

{% highlight html %}
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
{% endhighlight %}
Mark Otto's avatar
markdownify js modal    
Mark Otto committed
501
502
503
504
505
506
507
508
509
510 
### Via JavaScript

Call a modal with id `myModal` with a single line of JavaScript:

{% highlight js %}$('#myModal').modal(options){% endhighlight %}

### Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-`, as in `data-backdrop=""`.
Quy's avatar
Move .table-responsive from wrapper to .table    
Quy committed
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546 
<table class="table table-bordered table-striped table-responsive">
  <thead>
   <tr>
     <th style="width: 100px;">Name</th>
     <th style="width: 50px;">Type</th>
     <th style="width: 50px;">Default</th>
     <th>Description</th>
   </tr>
  </thead>
  <tbody>
   <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>
  </tbody>
</table>
Mark Otto's avatar
markdownify js modal    
Mark Otto committed
547
548
549 

### Methods
Chris Rebert's avatar
Use backticks/<code> for JS snippets in docs headings; closes #17192    
Chris Rebert committed
550 
#### `.modal(options)`
Mark Otto's avatar
markdownify js modal    
Mark Otto committed
551
552
553 

Activates your content as a modal. Accepts an optional options `object`.
Mark Otto's avatar
Break up docs into includes  
Mark Otto committed
554
555
556
557
558
559 
{% highlight js %}
$('#myModal').modal({
  keyboard: false
})
{% endhighlight %}
Chris Rebert's avatar
Use backticks/<code> for JS snippets in docs headings; closes #17192    
Chris Rebert committed
560 
#### `.modal('toggle')`
Mark Otto's avatar
markdownify js modal    
Mark Otto committed
561
562
563
564
565 

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).

{% highlight js %}$('#myModal').modal('toggle'){% endhighlight %}
Chris Rebert's avatar
Use backticks/<code> for JS snippets in docs headings; closes #17192    
Chris Rebert committed
566 
#### `.modal('show')`
Mark Otto's avatar
markdownify js modal    
Mark Otto committed
567
568
569
570
571 

Manually opens a modal. **Returns to the caller before the modal has actually been shown** (i.e. before the `shown.bs.modal` event occurs).

{% highlight js %}$('#myModal').modal('show'){% endhighlight %}
Chris Rebert's avatar
Use backticks/<code> for JS snippets in docs headings; closes #17192    
Chris Rebert committed
572 
#### `.modal('hide')`
Mark Otto's avatar
markdownify js modal    
Mark Otto committed
573
574
575
576
577 

Manually hides a modal. **Returns to the caller before the modal has actually been hidden** (i.e. before the `hidden.bs.modal` event occurs).

{% highlight js %}$('#myModal').modal('hide'){% endhighlight %}
Johann's avatar
Fix Modal documentation about _handleUpdate method + move to public scope (#21877)    
Johann committed
578
579
580
581
582
583 
#### `.modal('handleUpdate')`

Manually readjust the modal's position if the height of a modal changes while it is open (i.e. in case a scrollbar appears).

{% highlight js %}$('#myModal').modal('handleUpdate'){% endhighlight %}
Mark Otto's avatar
markdownify js modal    
Mark Otto committed
584
585 
### Events
Mark Otto's avatar
Merge branch 'master' into v4    
Mark Otto committed
586 
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">`).
Mark Otto's avatar
markdownify js modal    
Mark Otto committed
587
Quy's avatar
Move .table-responsive from wrapper to .table    
Quy committed
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613 
<table class="table table-bordered table-striped table-responsive">
  <thead>
   <tr>
     <th style="width: 150px;">Event Type</th>
     <th>Description</th>
   </tr>
  </thead>
  <tbody>
   <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>
  </tbody>
</table>
Mark Otto's avatar
markdownify js modal    
Mark Otto committed
614
Mark Otto's avatar
Break up docs into includes  
Mark Otto committed
615
616
617
618
619 
{% highlight js %}
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})
{% endhighlight %}