Bootstrap - wtyczka modalna

Modalne to okno potomne nałożone na swoje okno nadrzędne. Zwykle celem jest wyświetlenie treści z oddzielnego źródła, które może mieć pewną interakcję bez opuszczania okna nadrzędnego. Okna potomne mogą dostarczać informacji, interakcji lub więcej.

Jeśli chcesz dołączyć tę funkcję wtyczki indywidualnie, będziesz potrzebować modal.js. W przeciwnym razie, jak wspomniano w rozdziale Przegląd wtyczek Bootstrap , możesz dołączyć plik bootstrap.js lub zminimalizowany plik bootstrap.min.js .

Stosowanie

Możesz przełączać ukrytą zawartość wtyczki modalnej -

  • Via data attributes - Ustaw atrybut data-toggle = "modal" na elemencie kontrolera, takim jak przycisk lub link, wraz z rozszerzeniem data-target = "#identifier" lub href = "#identifier" aby kierować na określony modal (z id = "identyfikator") do przełączania.

  • Via JavaScript - Używając tej techniki, możesz wywołać modal o id = "identyfikator" za pomocą jednej linii JavaScript -

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

Przykład

Przykład statycznego okna modalnego przedstawiono w następującym przykładzie -

<h2>Example of creating Modals with Twitter Bootstrap</h2>

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

<!-- Modal -->
<div class = "modal fade" id = "myModal" tabindex = "-1" role = "dialog" 
   aria-labelledby = "myModalLabel" aria-hidden = "true">
   
   <div class = "modal-dialog">
      <div class = "modal-content">
         
         <div class = "modal-header">
            <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true">
                  &times;
            </button>
            
            <h4 class = "modal-title" id = "myModalLabel">
               This Modal title
            </h4>
         </div>
         
         <div class = "modal-body">
            Add some text here
         </div>
         
         <div class = "modal-footer">
            <button type = "button" class = "btn btn-default" data-dismiss = "modal">
               Close
            </button>
            
            <button type = "button" class = "btn btn-primary">
               Submit changes
            </button>
         </div>
         
      </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
  
</div><!-- /.modal -->

Details of the preceding code −

  • Aby wywołać okno modalne, potrzebujesz jakiegoś wyzwalacza. Możesz użyć przycisku lub łącza. Tutaj użyliśmy przycisku.

  • Jeśli spojrzysz na powyższy kod, zobaczysz, że w tagu <button> plik data-target = "#myModal"jest celem modalu, który chcesz załadować na stronie. Ten kod umożliwia tworzenie wielu modali na stronie, a następnie używanie różnych wyzwalaczy dla każdego z nich. Teraz, żeby było jasne, nie ładujesz wielu modali jednocześnie, ale możesz utworzyć wiele na stronach, które będą ładowane w różnym czasie.

  • Istnieją dwie klasy, na które należy zwrócić uwagę w modalu -

    • Pierwsza to .modal, co po prostu identyfikuje zawartość <div> jako modalną.

    • A druga to .fadeklasa. Przełączenie trybu modalnego spowoduje pojawienie się i zanikanie zawartości.

  • aria-labelledby = "myModalLabel", atrybut odwołuje się do tytułu modalnego.

  • Atrybut aria-hidden = "true" służy do utrzymywania niewidocznego okna modalnego do momentu pojawienia się wyzwalacza (jak kliknięcie skojarzonego przycisku).

  • <div class = "modal-header">, modal-header to klasa definiująca styl nagłówka okna modalnego.

  • class = "close", jest klasą CSS zamykającą, która ustawia styl przycisku Zamknij okna modalnego.

  • data-dismiss = "modal", to niestandardowy atrybut danych HTML5. Tutaj służy do zamykania okna modalnego.

  • class = "modal-body", to klasa CSS Bootstrap CSS do ustawiania stylu dla treści okna modalnego.

  • class = "modal-footer", to klasa CSS Bootstrap CSS do ustawiania stylu stopki okna modalnego.

  • data-toggle = "modal", Do otwarcia okna modalnego jest używany niestandardowy przełącznik danych atrybutu danych HTML5.

Opcje

Istnieją pewne opcje, które można przekazać za pośrednictwem atrybutów danych lub JavaScript, aby dostosować wygląd i działanie okna modalnego. Poniższa tabela zawiera listę opcji -

Nazwa opcji Typ / wartość domyślna Nazwa atrybutu danych Opis
zasłona boolean lub ciąg „static” Domyślnie: true tło danych Określ statyczny dla tła, jeśli nie chcesz, aby modal był zamykany, gdy użytkownik kliknie poza nim.
klawiatura boolean Domyślnie: prawda klawiatura danych Zamyka okno modalne po naciśnięciu klawisza Escape; ustaw na false, aby wyłączyć.
pokazać boolean Domyślnie: prawda pokaz danych Po zainicjowaniu pokazuje modalne.
zdalny ścieżka Domyślnie: false zdalne dane

Za pomocą metody jQuery .load wstrzyknij zawartość do ciała modalnego. Jeśli dodany zostanie href z prawidłowym adresem URL, załaduje tę zawartość. Przykład tego pokazano poniżej -

<a data-toggle = "modal" href = "remote.html" data-target = "#modal">Click me</a>

Metody

Oto kilka przydatnych metod, których można używać z modal ().

metoda Opis Przykład
Options - .modal (opcje) Aktywuje zawartość jako modalną. Akceptuje opcjonalny obiekt opcji.
$('#identifier').modal({
   keyboard: false
})
Toggle - .modal ('toggle') Ręcznie przełącza modal.
$('#identifier').modal('toggle')
Show - .modal ('pokaż') Ręcznie otwiera modal.
$('#identifier').modal('show')
Hide - .modal ('ukryj') Ręcznie ukrywa modal.
$('#identifier').modal('hide')

Przykład

Poniższy przykład demonstruje użycie metod -

<h2>Example of using methods of Modal Plugin</h2>

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

<!-- Modal -->
<div class = "modal fade" id = "myModal" tabindex = "-1" role = "dialog" 
   aria-labelledby = "myModalLabel" aria-hidden = "true">
   
   <div class = "modal-dialog">
      <div class = "modal-content">
         
         <div class = "modal-header">
            <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true">
               ×
            </button>
            
            <h4 class = "modal-title" id = "myModalLabel">
               This Modal title
            </h4>
         </div>
         
         <div class = "modal-body">
            Press ESC button to exit.
         </div>
         
         <div class = "modal-footer">
            <button type = "button" class = "btn btn-default" data-dismiss = "modal">
               Close
            </button>
            
            <button type = "button" class = "btn btn-primary">
               Submit changes
            </button>
         </div>
         
      </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
   
</div><!-- /.modal -->

<script>
   $(function () { $('#myModal').modal({
      keyboard: true
   })});
</script>

Wystarczy kliknąć przycisk Esc, aby zamknąć okno modalne.

Wydarzenia

Poniższa tabela zawiera listę zdarzeń do pracy z modalnym. Te zdarzenia mogą zostać użyte do podłączenia się do funkcji.

Zdarzenie Opis Przykład
show.bs.modal Uruchamiane po wywołaniu metody show.
$('#identifier').on('show.bs.modal', function () {
   // do something…
})
pokazano.bs.modal Uruchamiany, gdy modal stał się widoczny dla użytkownika (będzie czekał na zakończenie przejść CSS).
$('#identifier').on('shown.bs.modal', function () {
   // do something…
})
hide.bs.modal Wywoływane po wywołaniu metody hide instance.
$('#identifier').on('hide.bs.modal', function () {
   // do something…
})
hidden.bs.modal Uruchamiane, gdy modal przestał być ukrywany przed użytkownikiem.
$('#identifier').on('hidden.bs.modal', function () {
   // do something…
})

Przykład

Poniższy przykład demonstruje użycie zdarzeń -

<h2>Example of using events of Modal Plugin</h2>

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

<!-- Modal -->
<div class = "modal fade" id = "myModal" tabindex = "-1" role = "dialog" 
   aria-labelledby = "myModalLabel" aria-hidden = "true">
   
   <div class = "modal-dialog">
      <div class = "modal-content">
         
         <div class = "modal-header">
            <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true">
               ×
            </button>
            
            <h4 class = "modal-title" id = "myModalLabel">
               This Modal title
            </h4>
         </div>
         
         <div class = "modal-body">
            Click on close button to check Event functionality.
         </div>
         
         <div class = "modal-footer">
            <button type = "button" class = "btn btn-default" data-dismiss = "modal">
               Close
            </button>
            
            <button type = "button" class = "btn btn-primary">
               Submit changes
            </button>
         </div>
         
      </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
   
</div><!-- /.modal -->

<script>
   $(function () { $('#myModal').modal('hide')})});
</script>

<script>
   $(function () { $('#myModal').on('hide.bs.modal', function () {
      alert('Hey, I heard you like modals...');})
   });
</script>

Jak widać na powyższym ekranie, jeśli klikniesz przycisk Zamknij , czyli ukryj zdarzenie, zostanie wyświetlony komunikat ostrzegawczy.