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.