Modals
LeptonX uses
Bootstrap Modal's
component's latest version.
Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user
notifications, or completely custom content.
Modal Components
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.
Preview
HTML
<div class="bg-light rounded p-1">
<div class="modal" tabindex="-1" style="position: static; display: block">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary"
data-bs-dismiss="modal"
>
Close
</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
Live demo
Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page.
Preview
HTML
<!-- Button trigger modal -->
<button
type="button"
class="btn btn-primary"
data-bs-toggle="modal"
data-bs-target="#exampleModal"
>
Launch demo modal
</button>
<!-- Modal -->
<div
class="modal fade"
id="exampleModal"
tabindex="-1"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">Woohoo, you're reading this text in a modal!</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
Close
</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Static Backdrop
When backdrop is set to static, the modal will not close when clicking outside it. Click the button below to try it.
Preview
HTML
<!-- Button trigger modal -->
<button
type="button"
class="btn btn-primary"
data-bs-toggle="modal"
data-bs-target="#staticBackdrop"
>
Launch static backdrop modal
</button>
<!-- Modal -->
<div
class="modal fade"
id="staticBackdrop"
data-bs-backdrop="static"
data-bs-keyboard="false"
tabindex="-1"
aria-labelledby="staticBackdropLabel"
aria-hidden="true"
>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">
I will not close if you click outside me. Don't even try to press escape
key.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
Close
</button>
<button type="button" class="btn btn-primary">Understood</button>
</div>
</div>
</div>
</div>
Scrolling long content
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.
Preview
HTML
<button
type="button"
class="btn btn-primary"
data-bs-toggle="modal"
data-bs-target="#exampleModalLong"
>
Launch demo modal
</button>
<div
class="modal fade"
id="exampleModalLong"
tabindex="-1"
aria-labelledby="exampleModalLongTitle"
style="display: none"
aria-hidden="true"
>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body" style="min-height: 1500px">
<p>
This is some placeholder content to show the scrolling behavior for
modals. Instead of repeating the text the modal, we use an inline
style set a minimum height, thereby extending the length of the
overall modal and demonstrating the overflow scrolling. When content
becomes longer than the height of the viewport, scrolling will move
the modal as needed.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
Close
</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
You can also create a scrollable modal that allows scroll the modal body by adding
.modal-dialog-scrollable to .modal-dialog.
Preview
HTML
<button
type="button"
class="btn btn-primary"
data-bs-toggle="modal"
data-bs-target="#exampleModalScrollable"
>
Launch demo modal
</button>
<div
class="modal fade"
id="exampleModalScrollable"
tabindex="-1"
aria-labelledby="exampleModalScrollableTitle"
style="display: none"
aria-hidden="true"
>
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalScrollableTitle">
Modal title
</h5>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">
<p>
This is some placeholder content to show the scrolling behavior for
modals. We use repeated line breaks to demonstrate how content can
exceed minimum inner height, thereby showing inner scrolling. When
content becomes longer than the prefedined max-height of modal,
content will be cropped and scrollable within the modal.
</p>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<p>This content should appear at the bottom after you scroll.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
Close
</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Vertically centered
Add .modal-dialog-centered to .modal-dialog to vertically center the
modal.
Preview
HTML
<div class="d-flex flex-column flex-xxl-row gap-2">
<button
type="button"
class="btn btn-primary"
data-bs-toggle="modal"
data-bs-target="#exampleModalCenter"
>
Vertically centered modal
</button>
<button
type="button"
class="btn btn-primary"
data-bs-toggle="modal"
data-bs-target="#exampleModalCenteredScrollable"
>
Vertically centered scrollable modal
</button>
</div>
<div
class="modal fade"
id="exampleModalCenter"
tabindex="-1"
aria-labelledby="exampleModalCenterTitle"
style="display: none"
aria-hidden="true"
>
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">
<p>This is a vertically centered modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
Close
</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<div
class="modal fade"
id="exampleModalCenteredScrollable"
tabindex="-1"
aria-labelledby="exampleModalCenteredScrollableTitle"
style="display: none"
aria-hidden="true"
>
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalCenteredScrollableTitle">
Modal title
</h5>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">
<p>
This is some placeholder content to show a vertically centered modal.
We've added some extra copy here to show how vertically centering the
modal works when combined with scrollable modals. We also use some
repeated line breaks to quickly extend the height of the content,
thereby triggering the scrolling. When content becomes longer than the
prefedined max-height of modal, content will be cropped and scrollable
within the modal.
</p>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<p>Just like that.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
Close
</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Tooltips and popovers
Tooltips and popovers can be placed within modals as needed. When modals are closed, any tooltips and popovers within are also automatically dismissed.
Preview
HTML
<button
type="button"
class="btn btn-primary"
data-bs-toggle="modal"
data-bs-target="#exampleModalPopovers"
>
Launch demo modal
</button>
<div
class="modal fade"
id="exampleModalPopovers"
tabindex="-1"
aria-labelledby="exampleModalPopoversLabel"
style="display: none"
aria-hidden="true"
>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalPopoversLabel">Modal title</h5>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">
<h5>Popover in a modal</h5>
<p>
This
<a
href="#"
role="button"
class="btn btn-secondary popover-test"
title=""
data-bs-content="Popover body content is set in this attribute."
data-bs-container="#exampleModalPopovers"
data-bs-original-title="Popover title"
>button</a
>
triggers a popover on click.
</p>
<hr />
<h5>Tooltips in a modal</h5>
<p>
<a
href="#"
class="tooltip-test"
title=""
data-bs-container="#exampleModalPopovers"
data-bs-original-title="Tooltip"
>This link</a
>
and
<a
href="#"
class="tooltip-test"
title=""
data-bs-container="#exampleModalPopovers"
data-bs-original-title="Tooltip"
>that link</a
>
have tooltips on hover.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
Close
</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Using the grid
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.
Preview
HTML
<button
type="button"
class="btn btn-primary"
data-bs-toggle="modal"
data-bs-target="#gridSystemModal"
>
Launch demo modal
</button>
<div
class="modal fade"
id="gridSystemModal"
tabindex="-1"
aria-labelledby="gridModalLabel"
style="display: none"
aria-hidden="true"
>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="gridModalLabel">Grids in modals</h5>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-4 border border-primary bg-light mb-3 p-3">
.col-md-4
</div>
<div
class="col-md-4 ms-auto border border-primary bg-light mb-3 p-3"
>
.col-md-4 .ms-auto
</div>
</div>
<div class="row">
<div
class="col-md-3 ms-auto border border-primary bg-light mb-3 p-3"
>
.col-md-3 .ms-auto
</div>
<div
class="col-md-2 ms-auto border border-primary bg-light mb-3 p-3"
>
.col-md-2 .ms-auto
</div>
</div>
<div class="row">
<div
class="col-md-6 ms-auto border border-primary bg-light mb-3 p-3"
>
.col-md-6 .ms-auto
</div>
</div>
<div class="row">
<div class="col-sm-9 border border-primary bg-light mb-3">
Level 1: .col-sm-9
<div class="row">
<div class="col-8 col-sm-6 border border-primary bg-light p-3">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6 border border-primary bg-light p-3">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
Close
</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
