Source

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 .modalw 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, wautofocus jaki HTML5 definiuje swoją semantykę, atrybut HTML nie działa w modach Bootstrap. Aby osiągnąć ten sam efekt, użyj niestandardowego JavaScriptu:
$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
})

Efekt animacji tego komponentu zależy od prefers-reduced-motionzapytania 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

Poniżej znajduje się statyczny przykład modalny (oznaczający jego positioni displayzostał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" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </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-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-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</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.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Wyśrodkowany w pionie

Dodaj .modal-dialog-centereddo, .modal-dialogaby wyśrodkować w pionie modalny.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</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-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-fluidw .modal-body. Następnie użyj normalnych klas systemowych 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 ml-auto">.col-md-4 .ml-auto</div>
    </div>
    <div class="row">
      <div class="col-md-3 ml-auto">.col-md-3 .ml-auto</div>
      <div class="col-md-2 ml-auto">.col-md-2 .ml-auto</div>
    </div>
    <div class="row">
      <div class="col-md-6 ml-auto">.col-md-6 .ml-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-* (prawdopodobnie za pomocą jQuery ), aby zmienić zawartość modu w zależności od tego, który przycisk został kliknięty.

Poniżej znajduje się demo na żywo, a następnie przykładowe 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-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">New message</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="col-form-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <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-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>
$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

Zmień animację

Zmienna $modal-fade-transformokreśla stan transformacji .modal-dialogprzed modalną animacją zanikania, $modal-show-transformzmienna określa transformację .modal-dialogna 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ń .fadeklasę ze swojego znacznika modalnego.

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="..." aria-hidden="true">
  ...
</div>

Wysokości dynamiczne

Jeśli wysokość modalu zmienia się, gdy jest otwarty, powinieneś wywołać, $('#myModal').modal('handleUpdate')aby ponownie dostosować pozycję modalu w przypadku pojawienia się paska przewijania.

Dostępność

Pamiętaj, aby dodać role="dialog"i aria-labelledby="...", odwołując się do tytułu modalnego, do .modali role="document"do .modal-dialogsamego siebie. Dodatkowo możesz podać opis swojego modalnego okna dialogowego za pomocą aria-describedbyon .modal.

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”.

<!-- Extra large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-xl">Extra large modal</button>

<div class="modal fade bd-example-modal-xl" tabindex="-1" role="dialog" aria-labelledby="myExtraLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>

<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button>

<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

Stosowanie

Wtyczka modalna przełącza Twoje ukryte treści na żądanie, za pomocą atrybutów danych lub JavaScript. Dodaje również .modal-opendo <body>zastąpienia domyślnego zachowania przewijania i generuje .modal-backdropobszar kliknięcia do odrzucania wyświetlanych modów w przypadku kliknięcia poza nim.

Poprzez atrybuty danych

Aktywuj modalny bez pisania JavaScript. Ustaw data-toggle="modal"na elemencie kontrolera, takim jak przycisk, wraz z data-target="#foo"lub href="#foo", aby wskazać określony mod do przełączania.

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

Przez JavaScript

Wywołaj modalne z id myModalz pojedynczą linią JavaScript:

$('#myModal').modal(options)

Opcje

Opcje można przekazywać za pomocą atrybutów danych lub JavaScript. W przypadku atrybutów danych dołącz nazwę opcji do data-, jak w data-backdrop="".

Nazwa Rodzaj Domyślna Opis
zasłona wartość logiczna lub ciąg'static' PRAWDA Zawiera modalny element tła. Możesz też określić statictło, które nie zamyka modalnego kliknięcia.
klawiatura logiczne PRAWDA Zamyka modalne po naciśnięciu klawisza Escape
skupiać logiczne PRAWDA Umieszcza fokus na modalnym po zainicjowaniu.
pokazać logiczne PRAWDA Po inicjalizacji pokazuje modalny.

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 .

.modal(options)

Aktywuje treść jako modalną. Akceptuje opcjonalne opcje object.

$('#myModal').modal({
  keyboard: false
})

.modal('toggle')

Ręcznie przełącza modalny. Powraca do wywołującego, zanim modalny został faktycznie pokazany lub ukryty (tj. przed wystąpieniem zdarzenia shown.bs.modallub ).hidden.bs.modal

$('#myModal').modal('toggle')

.modal('show')

Ręcznie otwiera modalne. Powraca do wywołującego, zanim modalny został faktycznie pokazany (tj. przed shown.bs.modalwystąpieniem zdarzenia).

$('#myModal').modal('show')

.modal('hide')

Ręcznie ukrywa modalny. Powraca do wywołującego, zanim mod został faktycznie ukryty (tj. przed hidden.bs.modalwystąpieniem zdarzenia).

$('#myModal').modal('hide')

.modal('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').modal('handleUpdate')

.modal('dispose')

Niszczy modalny elementu.

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 showwywołaniu metody wystąpienia. W przypadku kliknięcia kliknięty element jest dostępny jako relatedTargetwłaściwość zdarzenia.
pokazano.bs.modalny 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 relatedTargetwłaściwość zdarzenia.
hide.bs.modal To zdarzenie jest wywoływane natychmiast po hidewywołaniu metody wystąpienia.
ukryty.bs.modalny To zdarzenie jest wywoływane po zakończeniu ukrywania modalności przed użytkownikiem (poczeka na zakończenie przejścia CSS). 
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})