rev/bootstrap
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Adapt modal.md to the recent main branch changes

Browse source
This commit is contained in:
XhmikosR 2020-11-14 09:34:25 +02:00
parent 638febae4c
commit d5d42c55e5
1 changed files with 18 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

49
site/content/docs/5.0/components/modal.md
View file

@ -361,9 +361,7 @@ Our first demo is for `.modal-left`, which also has a vertical `.nav-pills` comp
<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">&times;</span>
</button>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<ul class="nav nav-pills flex-column">
@ -390,9 +388,7 @@ Our first demo is for `.modal-left`, which also has a vertical `.nav-pills` comp
<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">&times;</span>
</button>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<ul class="nav nav-pills flex-column">
@ -415,29 +411,29 @@ Our first demo is for `.modal-left`, which also has a vertical `.nav-pills` comp
</div>
<div class="bd-example">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalLeft">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalLeft">
Launch left modal
</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalLeftFade">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalLeftFade">
Launch left modal w/ fade
</button>
</div>
{{< highlight html >}}
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalLeft">
```html
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-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">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-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
@ -448,15 +444,11 @@ In this `.modal-right` example, we've removed the default `.modal-body` padding
<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">&times;</span>
</button>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></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 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>
@ -472,15 +464,11 @@ In this `.modal-right` example, we've removed the default `.modal-body` padding
<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">&times;</span>
</button>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></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 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>
@ -492,30 +480,29 @@ In this `.modal-right` example, we've removed the default `.modal-body` padding
</div>
<div class="bd-example">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalRight">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalRight">
Launch right modal
</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalRightFade">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalRightFade">
Launch right modal w/ fade
</button>
</div>
{{< highlight html >}}
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalRight">
```html
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-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">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-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