twitter-bootstrap
Modalne okna dialogowe

Uwagi

Podstawowe użycie HTML

Modalne okno dialogowe Bootstrap to składnik Bootstrap, który tworzy modalne okno dialogowe, które unosi się nad zawartością na poziomie strony.

Oto przykład podstawowego użycia modalnego okna dialogowego Bootstrap w HTML:

<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Podstawowe użycie i inicjalizacja Javascript

Modalne komponenty okna dialogowego mogą być tworzone za pomocą jQuery za pomocą funkcji $('#myModal').modal(options) , gdzie $('#myModal') jest referencją najwyższego poziomu do konkretnego modalnego okna dialogowego, a options to obiekt JavaScript określający obiekt domyślne atrybuty modalnego okna dialogowego.

Obiekt options pozwala na zdefiniowanie wielu właściwości, które będą miały wpływ na zachowanie modalnego okna dialogowego. Te właściwości są zdefiniowane jako takie:

• Właściwość backdrop pozwala użytkownikowi określić, czy za modalnym oknem dialogowym ma się pojawiać szara nakładka. Rozpoznawane są zarówno wartości logiczne, jak i ciąg „statyczny”. Jeśli określono „statyczny”, modalne okno dialogowe nie zostanie zamknięte, gdy użytkownik kliknie nakładkę tła.
• Właściwość keyboard pozwala użytkownikowi określić, czy okno modalne ma być zamknięte po naciśnięciu klawisza Escape na klawiaturze.
• Właściwość show pozwala użytkownikowi określić, czy okno modalne ma się pojawiać podczas inicjalizacji modalu.

Oto przykład podstawowego użycia Javascript:

$('#carModal').modal({ backdrop: false, keyboard: true, show: false });

Podobnie jak w przypadku innych składników Bootstrap, opcje modalu można również określić w HTML za pomocą atrybutów danych.