Zyrex

Modal w Bootstrapie

Modal to element interfejsu użytkownika, który pojawia się nad resztą treści na stronie internetowej. Może zawierać formularze, wiadomości, wideo lub inne treści, które użytkownik może wyświetlić, ale które nie zajmują całego ekranu. Modale są często używane do wyświetlania ważnych informacji lub do wymuszenia uwagi użytkownika na konkretnym elemencie. W Bootstrapie modale są tworzone za pomocą klas CSS i JavaScript.

W najprostszym przypadku modal składa się z dwóch elementów: przycisku, który go otwiera, i samego modalu.

Przycisk otwierający modal może mieć dowolny kształt i rozmiar, ale musi być oznaczony klasą data-toggle="modal" oraz atrybutem data-target="#id_modalu", gdzie id_modalu to unikalne ID modalu. Przykład kodu przycisku otwierającego modal:

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Otwórz modal
</button>

Modal składa się z kontenera o klasie modal, który zawiera nagłówek, treść i stopkę. Nagłówek i stopka są opcjonalne. Kod modalu może wyglądać następująco:

<div class="modal" tabindex="-1" role="dialog" id="myModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Tytuł modalu</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        Treść modalu
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Zamknij</button>
        <button type="button" class="btn btn-primary">Zapisz zmiany</button>
      </div>
    </div>
  </div>
</div>