Pop-up / Modal - Kurs / Tutorial Bootstrap 4

Sprawdź najnowszą wersję komponentu modal zbudowaną na podstawie Bootstrapa 5. Kliknij tutaj aby zobaczyć przykłady oraz dowiedzieć się jak z nich skorzystać.

Wyskakujące okienka, okna pop-up, modal, lightbox – wiele nazw tego samego elementu czyli okna, które pojawiając się przysłania nam aktualną stronę. Zastosowań jest wiele, na pewno każdy kojarzy irytujące reklamy, które się w nich pojawiają lub zachęcają do zapisania się do newslettera. Ale korzystamy z nich także przeglądając galerie zdjęć na stronach lub czytając krótkie opisy produktów. W tym wpisie dowiemy się jak zbudować modal z pomocą Bootstrapa.

Podstawowy przykład

Kod HTML modala jest dość rozbudowany ale nazwy klas są intuicyjne, więc nie powinniście mieć problemu ze zrozumieniem gdzie umieszczać treści. Żeby nie przekombinować opiszę je krótko oraz umieszczę w kodzie przykładu komentarze z opisem za co odpowiadają kolejne elementy.

Nie wszystkie elementy są obowiązkowe ale o tym w przykładzie z uruchamianiem modala

.modal – wrapper całego modala
.modal-dialog – wrapper okna modala
.modal-content – wrapper zawartości modala
.modal-header – wrapper nagłówka modala
.modal-title – tytuł w nagłówku modala
.modal-body – wrapper treści modala
.modal-footer – wrapper stopki modala

Przykład

Kod


  <div class="modal" id="przykladowyModal" tabindex="-1" role="dialog"> <!-- wrapper całego modala -->
    <div class="modal-dialog" role="document"> <!-- wrapper okna modala -->
      <div class="modal-content"> <!-- wrapper treści modala -->
        <div class="modal-header"> <!-- div z nagłówkiem modala -->
          <h5 class="modal-title">Tytuł okna</h5> <!-- tytuł modala -->
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button> <!-- przycisk zamykania modala -->
        </div> <!-- END div z nagłówkiem modala -->
        <div class="modal-body"> <!-- div z zawartością modala -->
          <p>Treść modala</p>
        </div> <!-- END div z zawartością modala -->
        <div class="modal-footer"> <!-- div ze stopką modala -->
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Zamknij</button>
          <button type="button" class="btn btn-primary">Przycisk w stopce</button>
        </div> <!-- END div ze stopką modala -->
      </div> <!-- END wrapper treści modala -->
    </div>
  </div> <!-- END wrapper całego modala -->

Wyświetlanie modala

Wiemy już jak jest zbudowany nasz pop-up, więc pora go uruchomić. Najprostszym przykładem będzie użycie do tego przycisku. Aby nasz modal się uruchomił trzeba spełnić dwa warunki. Po pierwsze div z klasą .modal musi mieć również identyfikator ( w poniższym przykładzie #przykladowyModal1 ) a przycisk, który ma uruchomić modal musi posiadać parametry data-toggle="modal" oraz data-target="#przykladowyModal1". Drugi z parametrów musi kierować do identyfikatora jaki nadaliśmy modalowi. W przypadku większej ilości modali na stronie, każdy musi mieć unikalny identyfikator.

Jak pisałem wyżej, nie wszystkie elementy są obowiązkowe. Możemy na przykład zrezygnować z nagłówka lub stopki. Przykłady poniżej

Podstawowy przykład

Przykład

Kod


<!-- Przycisk uruchamiający modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#przykladowyModal1">
  Wyświetl modal
</button>
<!-- END Przycisk uruchamiający modal -->

  <div class="modal" id="przykladowyModal1" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Tytuł okna</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="modal-body">
          <p>Bacon ipsum dolor amet shank chuck spare ribs boudin cow, bresaola picanha ball tip sirloin prosciutto pork belly strip steak doner tail. Strip steak boudin sirloin jowl pancetta shank, prosciutto fatback alcatra kielbasa ham hock chicken turducken filet mignon beef. Pork belly biltong landjaeger meatball burgdoggen, chuck brisket. Pork loin flank cupim t-bone fatback kielbasa pork ball tip shoulder. Alcatra salami landjaeger, ham picanha swine tail pork jowl cow kevin. Jerky hamburger doner flank beef ribs fatback burgdoggen meatloaf.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Zamknij</button>
          <button type="button" class="btn btn-primary">Przycisk w stopce</button>
        </div>
      </div>
    </div>
  </div>

Modal bez nagłówka

Aby usunąć nagłówek, usuwamy diva z klasą .modal-header z całą jego zawartością

Przykład

Kod


<!-- Przycisk uruchamiający modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#przykladowyModal11">
  Wyświetl modal
</button>
<!-- END Przycisk uruchamiający modal -->

  <div class="modal" id="przykladowyModal11" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-body">
          <p>Bacon ipsum dolor amet shank chuck spare ribs boudin cow, bresaola picanha ball tip sirloin prosciutto pork belly strip steak doner tail. Strip steak boudin sirloin jowl pancetta shank, prosciutto fatback alcatra kielbasa ham hock chicken turducken filet mignon beef. Pork belly biltong landjaeger meatball burgdoggen, chuck brisket. Pork loin flank cupim t-bone fatback kielbasa pork ball tip shoulder. Alcatra salami landjaeger, ham picanha swine tail pork jowl cow kevin. Jerky hamburger doner flank beef ribs fatback burgdoggen meatloaf.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Zamknij</button>
          <button type="button" class="btn btn-primary">Przycisk w stopce</button>
        </div>
      </div>
    </div>
  </div>

Modal bez stopki

Aby usunąć nagłówek, usuwamy diva z klasą .modal-footer z całą jego zawartością

Przykład

Kod


<!-- Przycisk uruchamiający modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#przykladowyModal111">
  Wyświetl modal
</button>
<!-- END Przycisk uruchamiający modal -->

  <div class="modal" id="przykladowyModal111" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Tytuł okna</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="modal-body">
          <p>Bacon ipsum dolor amet shank chuck spare ribs boudin cow, bresaola picanha ball tip sirloin prosciutto pork belly strip steak doner tail. Strip steak boudin sirloin jowl pancetta shank, prosciutto fatback alcatra kielbasa ham hock chicken turducken filet mignon beef. Pork belly biltong landjaeger meatball burgdoggen, chuck brisket. Pork loin flank cupim t-bone fatback kielbasa pork ball tip shoulder. Alcatra salami landjaeger, ham picanha swine tail pork jowl cow kevin. Jerky hamburger doner flank beef ribs fatback burgdoggen meatloaf.</p>
        </div>
      </div>
    </div>
  </div>

Modal z dużą ilością treści

Gdy zajdzie potrzeba umieszczenia w modalu dużej ilości treści nie musimy martwić się o jego przewijanie. Zajmie się tym Bootstrap

Przykład

Kod


<!-- Przycisk uruchamiający modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#przykladowyModal2">
  Wyświetl modal
</button>
<!-- END Przycisk uruchamiający modal -->

  <div class="modal" id="przykladowyModal2" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Tytuł okna</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="modal-body">
          <p>Bacon ipsum dolor amet shank chuck spare ribs boudin cow, bresaola picanha ball tip sirloin prosciutto pork belly strip steak doner tail. Strip steak boudin sirloin jowl pancetta shank, prosciutto fatback alcatra kielbasa ham hock chicken turducken filet mignon beef. Pork belly biltong landjaeger meatball burgdoggen, chuck brisket. Pork loin flank cupim t-bone fatback kielbasa pork ball tip shoulder. Alcatra salami landjaeger, ham picanha swine tail pork jowl cow kevin. Jerky hamburger doner flank beef ribs fatback burgdoggen meatloaf.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Zamknij</button>
          <button type="button" class="btn btn-primary">Przycisk w stopce</button>
        </div>
      </div>
    </div>
  </div>

Wyśrodkowany modal

Jak pewnie zauważyliście w pierwszym przykładzie, modal wyświetla się u góry ekranu. Gdybyśmy chcieli wyśrodkować go w pionie i w poziomie, wystarczy aby divovi z klasą .modal-dialog dodać klasę .modal-dialog-centered

Przykład

Kod


<!-- Przycisk uruchamiający modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#przykladowyModal3">
  Wyświetl modal
</button>
<!-- END Przycisk uruchamiający modal -->

  <div class="modal" id="przykladowyModal3" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Tytuł okna</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="modal-body">
          <p>Bacon ipsum dolor amet shank chuck spare ribs boudin cow, bresaola picanha ball tip sirloin prosciutto pork belly strip steak doner tail. Strip steak boudin sirloin jowl pancetta shank, prosciutto fatback alcatra kielbasa ham hock chicken turducken filet mignon beef. Pork belly biltong landjaeger meatball burgdoggen, chuck brisket. Pork loin flank cupim t-bone fatback kielbasa pork ball tip shoulder. Alcatra salami landjaeger, ham picanha swine tail pork jowl cow kevin. Jerky hamburger doner flank beef ribs fatback burgdoggen meatloaf.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Zamknij</button>
          <button type="button" class="btn btn-primary">Przycisk w stopce</button>
        </div>
      </div>
    </div>
  </div>

Siatka / Grid w modalu

W poprzednich przykładach umieszczaliśmy treść modala tylko wewnątrz diva .modal-body i ograniczaliśmy się do paragrafów tekstu. Twórcy Bootstrap pozwalają zrobić bardzo duży krok naprzód i umieszczać wewnątrz modala siatkę czyli rzędy i kolumny a także je zagnieżdzać. Dzięki temu możecie układać jego zawartość dokładnie według swoich potrzeb.

Przykład

Rozmiary modala

Dla niektórych elementów, twórcy Bootstrap przygotowali gotowe klasy definiujące ich wielkość. Identycznie jest dla modala. Dodanie do diva z klasą .modal-dialog klasy .modal-sm wyświetli nam okno mniejsze od standardowego. Natomiast dodanie klasy .modal-lg spowoduje pojawienie się większego popupa.

Mniejszy modal

Przykład

Kod


<!-- Przycisk uruchamiający modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#przykladowyModal5">
  Wyświetl modal
</button>
<!-- END Przycisk uruchamiający modal -->

  <div class="modal" id="przykladowyModal5" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-sm" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Mniejszy modal</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="modal-body">
          <p>Bacon ipsum dolor amet shank chuck spare ribs boudin cow, bresaola picanha ball tip sirloin prosciutto pork belly strip steak doner tail. Strip steak boudin sirloin jowl pancetta shank, prosciutto fatback alcatra kielbasa ham hock chicken turducken filet mignon beef. Pork belly biltong landjaeger meatball burgdoggen, chuck brisket. Pork loin flank cupim t-bone fatback kielbasa pork ball tip shoulder. Alcatra salami landjaeger, ham picanha swine tail pork jowl cow kevin. Jerky hamburger doner flank beef ribs fatback burgdoggen meatloaf.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Zamknij</button>
          <button type="button" class="btn btn-primary">Przycisk w stopce</button>
        </div>
      </div>
    </div>
  </div>

Większy modal

Przykład

Kod


<!-- Przycisk uruchamiający modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#przykladowyModal6">
  Wyświetl modal
</button>
<!-- END Przycisk uruchamiający modal -->

  <div class="modal" id="przykladowyModal6" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Większy modal</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="modal-body">
          <p>Bacon ipsum dolor amet shank chuck spare ribs boudin cow, bresaola picanha ball tip sirloin prosciutto pork belly strip steak doner tail. Strip steak boudin sirloin jowl pancetta shank, prosciutto fatback alcatra kielbasa ham hock chicken turducken filet mignon beef. Pork belly biltong landjaeger meatball burgdoggen, chuck brisket. Pork loin flank cupim t-bone fatback kielbasa pork ball tip shoulder. Alcatra salami landjaeger, ham picanha swine tail pork jowl cow kevin. Jerky hamburger doner flank beef ribs fatback burgdoggen meatloaf.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Zamknij</button>
          <button type="button" class="btn btn-primary">Przycisk w stopce</button>
        </div>
      </div>
    </div>
  </div>