Add side modals
This commit is contained in:
Mark Otto
XhmikosR
parent
4f8b243ac1
commit
638febae4c
3 changed files with 223 additions and 1 deletions
|
|
@ -233,3 +233,50 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-left,
|
||||
.modal-right {
|
||||
.modal-dialog {
|
||||
width: $modal-sidebar-width;
|
||||
max-width: $modal-sidebar-max-width;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
transform: translate(0);
|
||||
@include transition(transform .2s);
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
height: inherit;
|
||||
border: 0;
|
||||
@include border-radius(0);
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
&.modal.fade {
|
||||
.modal-dialog {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
&.modal.show {
|
||||
.modal-dialog {
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal.modal-left {
|
||||
.modal-dialog {
|
||||
margin-right: auto;
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
|
||||
.modal.modal-right {
|
||||
.modal-dialog {
|
||||
margin-left: auto;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1161,6 +1161,9 @@ $modal-md: 500px !default;
|
|||
$modal-lg: 800px !default;
|
||||
$modal-xl: 1140px !default;
|
||||
|
||||
$modal-sidebar-width: 350px !default;
|
||||
$modal-sidebar-max-width: 80% !default;
|
||||
|
||||
$modal-fade-transform: translate(0, -50px) !default;
|
||||
$modal-show-transform: none !default;
|
||||
$modal-transition: transform .3s ease-out !default;
|
||||
|
|
|
|||
|
|
@ -186,7 +186,6 @@ When backdrop is set to static, the modal will not close when clicking outside i
|
|||
</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.
|
||||
|
|
@ -347,6 +346,179 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
|
|||
</div>
|
||||
```
|
||||
|
||||
## Sidebar modals
|
||||
|
||||
Convert modals into offcanvas sidebar components with the addition of `.modal-left` or `.modal-right`. These classes override the modal's default position, sizing, and transitions to make them appear as offcanvas drawers for content, shopping carts, navigation, and more.
|
||||
|
||||
With these two demos, we've removed our optional `.modal-footer`s, but you can add them back. You can also add any custom content within the modal, or change the default appearance, as you need.
|
||||
|
||||
### Left modal
|
||||
|
||||
Our first demo is for `.modal-left`, which also has a vertical `.nav-pills` component in it. If you include `.fade` on the `.modal`, the modal and backdrop will slowly fade into view instead of sliding into the viewport from offscreen.
|
||||
|
||||
<div class="modal modal-left" id="modalLeft" tabindex="-1" aria-labelledby="modalLeftLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="modalLeftLabel">Modal left</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<ul class="nav nav-pills flex-column">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Active</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal modal-left fade" id="modalLeftFade" tabindex="-1" aria-labelledby="modalLeftFadeLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="modalLeftFadeLabel">Modal left</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<ul class="nav nav-pills flex-column">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Active</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Link</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bd-example">
|
||||
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalLeft">
|
||||
Launch left modal
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalLeftFade">
|
||||
Launch left modal w/ fade
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{{< highlight html >}}
|
||||
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalLeft">
|
||||
Launch left modal
|
||||
</button>
|
||||
<div class="modal modal-left" id="modalLeftFade" tabindex="-1" aria-labelledby="modalLeftFadeLabel" aria-hidden="true">
|
||||
...
|
||||
</div>
|
||||
|
||||
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalLeftFadeFade">
|
||||
Launch left modal w/ fade
|
||||
</button>
|
||||
<div class="modal modal-left fade" id="modalLeftFadeFade" tabindex="-1" aria-labelledby="modalLeftFadeFadeLabel" aria-hidden="true">
|
||||
...
|
||||
</div>
|
||||
{{< /highlight >}}
|
||||
|
||||
### Right modal
|
||||
|
||||
In this `.modal-right` example, we've removed the default `.modal-body` padding with `.p-0` and added a linked list group within. Just like the left modal, add `.fade` to fade in the modal and backdrop instead of sliding into the viewport from offscreen.
|
||||
|
||||
<div class="modal modal-right" id="modalRight" tabindex="-1" aria-labelledby="modalRightLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="modalRightLabel">Modal right</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body p-0">
|
||||
<div class="list-group list-group-flush">
|
||||
<a href="#" class="list-group-item list-group-item-action active" aria-current="true">
|
||||
Cras justo odio
|
||||
</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
|
||||
<a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">Vestibulum at eros</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal modal-right fade" id="modalRightFade" tabindex="-1" aria-labelledby="modalRightFadeLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="modalRightFadeLabel">Modal right</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body p-0">
|
||||
<div class="list-group list-group-flush">
|
||||
<a href="#" class="list-group-item list-group-item-action active" aria-current="true">
|
||||
Cras justo odio
|
||||
</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
|
||||
<a href="#" class="list-group-item list-group-item-action">Porta ac consectetur ac</a>
|
||||
<a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">Vestibulum at eros</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bd-example">
|
||||
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalRight">
|
||||
Launch right modal
|
||||
</button>
|
||||
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalRightFade">
|
||||
Launch right modal w/ fade
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{{< highlight html >}}
|
||||
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalRight">
|
||||
Launch right modal
|
||||
</button>
|
||||
<div class="modal modal-right" id="modalRight" tabindex="-1" aria-labelledby="modalRightLabel" aria-hidden="true">
|
||||
...
|
||||
</div>
|
||||
|
||||
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalRightFade">
|
||||
Launch right modal w/ fade
|
||||
</button>
|
||||
<div class="modal modal-right fade" id="modalRightFade" tabindex="-1" aria-labelledby="modalRightFadeLabel" aria-hidden="true">
|
||||
...
|
||||
</div>
|
||||
|
||||
{{< /highlight >}}
|
||||
|
||||
## Working with modals
|
||||
|
||||
### Tooltips and popovers
|
||||
|
||||
[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.
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue