<td><code>.modal-fullscreen-xl-down</code></td>
<td>Below <code>1200px</code></td>
</tr>
+ <tr>
+ <td><code>.modal-fullscreen-xxl-down</code></td>
+ <td>Below <code>1400px</code></td>
+ </tr>
</tbody>
</table>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalFullscreenMd">Full screen below md</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalFullscreenLg">Full screen below lg</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalFullscreenXl">Full screen below xl</button>
+ <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalFullscreenXxl">Full screen below xxl</button>
</div>
{{< highlight html >}}
</div>
</div>
+<div class="modal fade" id="exampleModalFullscreenXxl" tabindex="-1" aria-labelledby="exampleModalFullscreenXxlLabel" aria-hidden="true">
+ <div class="modal-dialog modal-fullscreen-xxl-down">
+ <div class="modal-content">
+ <div class="modal-header">
+ <h5 class="modal-title h4" id="exampleModalFullscreenXxlLabel">Full screen below xxl</h5>
+ <button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
+ </div>
+ <div class="modal-body">
+ ...
+ </div>
+ <div class="modal-footer">
+ <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+ </div>
+ </div>
+ </div>
+</div>
+
## 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.
projects / thirdparty / bootstrap.git / commitdiff
