twitter-bootstrap
Модальные диалоги

замечания

Основное использование HTML

Модальный диалог Bootstrap - это компонент Bootstrap, который создает модальное диалоговое окно, которое перемещается по содержимому на уровне страницы.

Ниже приведен пример базового использования модального диалога Bootstrap в 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 -->

Использование и инициализация основного Javascript

Модальные диалоговые компоненты могут быть созданы через jQuery с помощью функции $('#myModal').modal(options) , где $('#myModal') является ссылкой верхнего уровня на конкретный модальный диалог, а options - это объект Javascript, определяющий атрибуты модального диалога по умолчанию.

Объект options позволяет определить несколько свойств, которые влияют на поведение модального диалогового окна. Эти свойства определяются как таковые:

• Свойство backdrop позволяет пользователю определить, хотите ли они, чтобы серый фоновой надпись отображался за модальным диалогом. Будут распознаны как логические значения, так и строка «статические». Если указано «статический», модальный диалог не будет закрыт, когда пользователь нажмет на фоновое оверлей.
• Свойство keyboard позволяет пользователю определить, нужно ли закрывать модальное диалоговое окно, когда клавиша эвакуации нажата на клавиатуре.
• Свойство show позволяет пользователю определить, хотите ли они, чтобы модальный диалог появлялся, когда модаль инициализирован.

Ниже приведен пример использования базового Javascript:

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

Как и в случае с другими компонентами Bootstrap, параметры модальности также могут быть указаны в HTML через атрибуты данных.