Modalny
Użyj modalnej wtyczki JavaScript Bootstrap, aby dodać do swojej witryny okna dialogowe dla lightboxów, powiadomień dla użytkowników lub całkowicie niestandardowych treści.
Jak to działa
Zanim zaczniesz korzystać z modalnego komponentu Bootstrap, koniecznie przeczytaj poniższe, ponieważ nasze opcje menu uległy ostatnio zmianie.
- Modale są budowane za pomocą HTML, CSS i JavaScript. Są one umieszczane nad wszystkim innym w dokumencie i usuwają przewijanie
<body>
, aby zamiast tego przewijała się zawartość modalna. - Kliknięcie modalnego „tła” automatycznie zamknie modalne.
- Bootstrap obsługuje tylko jedno okno modalne na raz. Zagnieżdżone mody nie są obsługiwane, ponieważ uważamy, że są one kiepskie dla użytkowników.
- Modals use
position: fixed
, co czasami może być nieco specyficzne w przypadku renderowania. Jeśli to możliwe, umieść modalny kod HTML na najwyższym poziomie, aby uniknąć potencjalnych zakłóceń ze strony innych elementów. Prawdopodobnie napotkasz problemy podczas zagnieżdżania.modal
w innym stałym elemencie. - Po raz kolejny, ze względu na
position: fixed
, istnieją pewne zastrzeżenia dotyczące korzystania z modali na urządzeniach mobilnych. Szczegółowe informacje można znaleźć w naszej dokumentacji dotyczącej obsługi przeglądarek. - Ze względu na sposób, w
autofocus
jaki HTML5 definiuje swoją semantykę, atrybut HTML nie działa w modach Bootstrap. Aby osiągnąć ten sam efekt, użyj niestandardowego JavaScriptu:
var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')
myModal.addEventListener('shown.bs.modal', function () {
myInput.focus()
})
prefers-reduced-motion
zapytania o media. Zobacz
zmniejszoną sekcję ruchu w naszej dokumentacji ułatwień dostępu .
Czytaj dalej, aby uzyskać dema i wskazówki dotyczące użytkowania.
Przykłady
Komponenty modalne
Poniżej znajduje się statyczny przykład modalny (oznaczający jego position
i display
zostały zastąpione). Uwzględniono nagłówek modalny, treść modalną (wymagane dla padding
) i stopkę modalną (opcjonalnie). Prosimy o dołączanie nagłówków modalnych do akcji odrzucania, gdy tylko jest to możliwe, lub podanie innej wyraźnej akcji odrzucania.
<div class="modal" tabindex="-1">
<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>
Demo na żywo
Przełącz działające demo modalne, klikając poniższy przycisk. Zsunie się i zniknie od góry strony.
<!-- 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">
...
</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>
Tło statyczne
Gdy tło jest ustawione jako statyczne, modalne nie zamknie się po kliknięciu poza nim. Kliknij przycisk poniżej, aby spróbować.
<!-- 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">
...
</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>
Przewijanie długich treści
Gdy modalne stają się zbyt długie dla okna roboczego lub urządzenia użytkownika, przewijają się niezależnie od samej strony. Wypróbuj poniższe demo, aby zobaczyć, co mamy na myśli.
Możesz również utworzyć przewijalny modalny, który umożliwia przewijanie treści modalnej, dodając .modal-dialog-scrollable
do .modal-dialog
.
<!-- Scrollable modal -->
<div class="modal-dialog modal-dialog-scrollable">
...
</div>
Wyśrodkowany w pionie
Dodaj .modal-dialog-centered
do, .modal-dialog
aby wyśrodkować w pionie modalny.
<!-- Vertically centered modal -->
<div class="modal-dialog modal-dialog-centered">
...
</div>
<!-- Vertically centered scrollable modal -->
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
...
</div>
Podpowiedzi i popovery
Etykiety narzędzi i okienka popover można umieszczać w ramach modalnych w razie potrzeby. Gdy modalne są zamknięte, wszelkie podpowiedzi i okienka popover w obrębie są również automatycznie odrzucane.
<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-bs-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>
Korzystanie z siatki
Wykorzystaj system siatki Bootstrap w ramach modalnej, zagnieżdżając .container-fluid
w .modal-body
. Następnie użyj normalnych klas systemu siatki, tak jak gdziekolwiek indziej.
<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 ms-auto">.col-md-4 .ms-auto</div>
</div>
<div class="row">
<div class="col-md-3 ms-auto">.col-md-3 .ms-auto</div>
<div class="col-md-2 ms-auto">.col-md-2 .ms-auto</div>
</div>
<div class="row">
<div class="col-md-6 ms-auto">.col-md-6 .ms-auto</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>
Różne treści modalne
Masz kilka przycisków, które uruchamiają ten sam mod z nieco inną zawartością? Użyj atrybutówevent.relatedTarget
i HTMLdata-bs-*
, aby zróżnicować zawartość modułu modalnego w zależności od tego, który przycisk został kliknięty.
Poniżej znajduje się demo na żywo, a następnie przykładowy kod HTML i JavaScript. Aby uzyskać więcej informacji, zapoznaj się z dokumentacją dotyczącą zdarzeń modalnych, aby uzyskać szczegółowe informacje na temat relatedTarget
.
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@getbootstrap">Open modal for @getbootstrap</button>
<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">New message</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form>
<div class="mb-3">
<label for="recipient-name" class="col-form-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="mb-3">
<label for="message-text" class="col-form-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-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
var exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', function (event) {
// Button that triggered the modal
var button = event.relatedTarget
// Extract info from data-bs-* attributes
var recipient = button.getAttribute('data-bs-whatever')
// If necessary, you could initiate an AJAX request here
// and then do the updating in a callback.
//
// Update the modal's content.
var modalTitle = exampleModal.querySelector('.modal-title')
var modalBodyInput = exampleModal.querySelector('.modal-body input')
modalTitle.textContent = 'New message to ' + recipient
modalBodyInput.value = recipient
})
Przełączaj między modalami
Przełączaj się między wieloma modami z pewnym sprytnym rozmieszczeniem atrybutów data-bs-target
i . data-bs-toggle
Na przykład możesz przełączyć tryb resetowania hasła z już otwartego trybu logowania. Należy pamiętać, że wiele modów nie może być otwartych w tym samym czasie — ta metoda po prostu przełącza między dwoma oddzielnymi modami.
<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalToggleLabel">Modal 1</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Show a second modal and hide this one with the button below.
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal" data-bs-dismiss="modal">Open second modal</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalToggleLabel2">Modal 2</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Hide this modal and show the first with the button below.
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal" data-bs-dismiss="modal">Back to first</button>
</div>
</div>
</div>
</div>
<a class="btn btn-primary" data-bs-toggle="modal" href="#exampleModalToggle" role="button">Open first modal</a>
Zmień animację
Zmienna $modal-fade-transform
określa stan transformacji .modal-dialog
przed modalną animacją zanikania, $modal-show-transform
zmienna określa transformację .modal-dialog
na końcu modalnej animacji zanikania.
Jeśli chcesz na przykład animację powiększenia, możesz ustawić $modal-fade-transform: scale(.8)
.
Usuń animację
W przypadku modów, które po prostu pojawiają się, a nie pojawiają się w widoku, usuń .fade
klasę ze swojego znacznika modalnego.
<div class="modal" tabindex="-1" aria-labelledby="..." aria-hidden="true">
...
</div>
Wysokości dynamiczne
Jeśli wysokość modalu zmienia się, gdy jest otwarty, powinieneś wywołać, myModal.handleUpdate()
aby ponownie dostosować pozycję modalu w przypadku pojawienia się paska przewijania.
Dostępność
Pamiętaj, aby dodać aria-labelledby="..."
, odwołując się do tytułu modalnego, do .modal
. Dodatkowo możesz podać opis swojego modalnego okna dialogowego za pomocą aria-describedby
on .modal
. Pamiętaj, że nie musisz dodawać role="dialog"
, ponieważ dodajemy je już za pomocą JavaScript.
Osadzanie filmów z YouTube
Osadzanie filmów z YouTube w modach wymaga dodatkowego JavaScriptu, który nie jest dostępny w Bootstrap, aby automatycznie zatrzymać odtwarzanie i nie tylko. Zobacz ten pomocny post Stack Overflow , aby uzyskać więcej informacji.
Opcjonalne rozmiary
Modale mają trzy opcjonalne rozmiary, dostępne za pośrednictwem klas modyfikatorów, które można umieścić na .modal-dialog
. Te rozmiary pojawiają się w pewnych punktach przerwania, aby uniknąć poziomych pasków przewijania w węższych oknach roboczych.
Rozmiar | Klasa | Modalna maksymalna szerokość |
---|---|---|
Mały | .modal-sm |
300px |
Domyślna | Nic | 500px |
Wielki | .modal-lg |
800px |
Bardzo duży | .modal-xl |
1140px |
Nasz domyślny modalny bez klasy modyfikatora stanowi modalny rozmiar „średni”.
<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>
Tryb pełnoekranowy
Innym nadpisaniem jest opcja wyskakującego okna modalnego obejmującego okno użytkownika, dostępnego za pośrednictwem klas modyfikatorów umieszczonych na .modal-dialog
.
Klasa | Dostępność |
---|---|
.modal-fullscreen |
Zawsze |
.modal-fullscreen-sm-down |
Poniżej576px |
.modal-fullscreen-md-down |
Poniżej768px |
.modal-fullscreen-lg-down |
Poniżej992px |
.modal-fullscreen-xl-down |
Poniżej1200px |
.modal-fullscreen-xxl-down |
Poniżej1400px |
<!-- Full screen modal -->
<div class="modal-dialog modal-fullscreen-sm-down">
...
</div>
Sass
Zmienne
$modal-inner-padding: $spacer;
$modal-footer-margin-between: .5rem;
$modal-dialog-margin: .5rem;
$modal-dialog-margin-y-sm-up: 1.75rem;
$modal-title-line-height: $line-height-base;
$modal-content-color: null;
$modal-content-bg: $white;
$modal-content-border-color: rgba($black, .2);
$modal-content-border-width: $border-width;
$modal-content-border-radius: $border-radius-lg;
$modal-content-inner-border-radius: subtract($modal-content-border-radius, $modal-content-border-width);
$modal-content-box-shadow-xs: $box-shadow-sm;
$modal-content-box-shadow-sm-up: $box-shadow;
$modal-backdrop-bg: $black;
$modal-backdrop-opacity: .5;
$modal-header-border-color: $border-color;
$modal-footer-border-color: $modal-header-border-color;
$modal-header-border-width: $modal-content-border-width;
$modal-footer-border-width: $modal-header-border-width;
$modal-header-padding-y: $modal-inner-padding;
$modal-header-padding-x: $modal-inner-padding;
$modal-header-padding: $modal-header-padding-y $modal-header-padding-x; // Keep this for backwards compatibility
$modal-sm: 300px;
$modal-md: 500px;
$modal-lg: 800px;
$modal-xl: 1140px;
$modal-fade-transform: translate(0, -50px);
$modal-show-transform: none;
$modal-transition: transform .3s ease-out;
$modal-scale-transform: scale(1.02);
Pętla
Responsywne tryby pełnoekranowe są generowane przez $breakpoints
mapę i pętlę w programie scss/_modal.scss
.
@each $breakpoint in map-keys($grid-breakpoints) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
$postfix: if($infix != "", $infix + "-down", "");
@include media-breakpoint-down($breakpoint) {
.modal-fullscreen#{$postfix} {
width: 100vw;
max-width: none;
height: 100%;
margin: 0;
.modal-content {
height: 100%;
border: 0;
@include border-radius(0);
}
.modal-header {
@include border-radius(0);
}
.modal-body {
overflow-y: auto;
}
.modal-footer {
@include border-radius(0);
}
}
}
}
Stosowanie
Wtyczka modalna przełącza Twoje ukryte treści na żądanie, za pomocą atrybutów danych lub JavaScript. Zastępuje również domyślne zachowanie przewijania i generuje a, .modal-backdrop
aby zapewnić obszar kliknięcia do odrzucania wyświetlanych modów po kliknięciu poza modem.
Poprzez atrybuty danych
Aktywuj modalny bez pisania JavaScript. Ustaw data-bs-toggle="modal"
na elemencie kontrolera, takim jak przycisk, wraz z data-bs-target="#foo"
lub href="#foo"
, aby wskazać określony mod do przełączania.
<button type="button" data-bs-toggle="modal" data-bs-target="#myModal">Launch modal</button>
Przez JavaScript
Utwórz modalny za pomocą jednej linii JavaScript:
var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
Opcje
Opcje można przekazywać za pomocą atrybutów danych lub kodu JavaScript. W przypadku atrybutów danych dołącz nazwę opcji do data-bs-
, jak w data-bs-backdrop=""
.
Nazwa | Rodzaj | Domyślna | Opis |
---|---|---|---|
backdrop |
wartość logiczna lub ciąg'static' |
true |
Zawiera modalny element tła. Możesz też określić static tło, które nie zamyka modalnego kliknięcia. |
keyboard |
logiczne | true |
Zamyka modalne po naciśnięciu klawisza Escape |
focus |
logiczne | true |
Umieszcza fokus na modalnym po zainicjowaniu. |
Metody
Metody asynchroniczne i przejścia
Wszystkie metody API są asynchroniczne i rozpoczynają przejście . Wracają do rozmówcy zaraz po rozpoczęciu przejścia, ale przed jego zakończeniem . Ponadto wywołanie metody na składniku przechodzącym zostanie zignorowane .
Zobacz naszą dokumentację JavaScript, aby uzyskać więcej informacji .
Opcje przekazywania
Aktywuje treść jako modalną. Akceptuje opcjonalne opcje object
.
var myModal = new bootstrap.Modal(document.getElementById('myModal'), {
keyboard: false
})
przełącznik
Ręcznie przełącza modalny. Powraca do wywołującego, zanim modalny został faktycznie pokazany lub ukryty (tj. przed wystąpieniem zdarzenia shown.bs.modal
lub ).hidden.bs.modal
myModal.toggle()
pokazać
Ręcznie otwiera modalne. Powraca do wywołującego, zanim modalny został faktycznie pokazany (tj. przed shown.bs.modal
wystąpieniem zdarzenia).
myModal.show()
Możesz również przekazać element DOM jako argument, który może zostać odebrany w zdarzeniach modalnych (jako relatedTarget
właściwość).
var modalToggle = document.getElementById('toggleMyModal') // relatedTarget
myModal.show(modalToggle)
ukryć
Ręcznie ukrywa modalny. Powraca do wywołującego, zanim mod został faktycznie ukryty (tj. przed hidden.bs.modal
wystąpieniem zdarzenia).
myModal.hide()
handleUpdate
Ręcznie dostosuj położenie modalu, jeśli jego wysokość zmieni się, gdy jest on otwarty (np. w przypadku pojawienia się paska przewijania).
myModal.handleUpdate()
dysponować
Niszczy modalny elementu. (Usuwa dane zapisane w elemencie DOM)
myModal.dispose()
uzyskac instancje
Metoda statyczna , która pozwala uzyskać instancję modalną skojarzoną z elementem DOM
var myModalEl = document.getElementById('myModal')
var modal = bootstrap.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance
getOrCreateInstance
Metoda statyczna , która pozwala uzyskać instancję modalną skojarzoną z elementem DOM lub utworzyć nową w przypadku, gdy nie została zainicjowana
var myModalEl = document.querySelector('#myModal')
var modal = bootstrap.Modal.getOrCreateInstance(myModalEl) // Returns a Bootstrap modal instance
Wydarzenia
Klasa modalna Bootstrap udostępnia kilka zdarzeń do podłączenia do funkcji modalnej. Wszystkie zdarzenia modalne są uruchamiane w samym module (tj. w <div class="modal">
).
Typ wydarzenia | Opis |
---|---|
show.bs.modal |
To zdarzenie jest wyzwalane natychmiast po show wywołaniu metody wystąpienia. W przypadku kliknięcia kliknięty element jest dostępny jako relatedTarget właściwość zdarzenia. |
shown.bs.modal |
To zdarzenie jest wywoływane, gdy modalny zostanie udostępniony użytkownikowi (będzie czekał na zakończenie przejść CSS). W przypadku kliknięcia kliknięty element jest dostępny jako relatedTarget właściwość zdarzenia. |
hide.bs.modal |
To zdarzenie jest wywoływane natychmiast po hide wywołaniu metody wystąpienia. |
hidden.bs.modal |
To zdarzenie jest wywoływane po zakończeniu ukrywania modalności przed użytkownikiem (poczeka na zakończenie przejścia CSS). |
hidePrevented.bs.modal |
To zdarzenie jest wywoływane, gdy wyświetlany jest modalny, a jego tło jest static ustawione, a kliknięcie poza modem lub naciśnięcie klawisza Escape jest wykonywane z opcją klawiatury lub data-bs-keyboard ustawioną na false . |
var myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('hidden.bs.modal', function (event) {
// do something...
})