Русский

Учебник Bootstrap

Макеты Bootstrap

Содержание Bootstrap

Компоненты Bootstrap

Bootstrap Формы

Поддержка Bootstrap

Утилиты Bootstrap

Демо Bootstrap

Bootstrap - Пример модального окна

Что такое модальное окно?

Здравствуйте, будущие веб-разработчики! Сегодня мы окунёмся в захватывающий мир модальных окон Bootstrap. Как ваш доброжелательный компьютерный учитель, я здесь, чтобы провести вас через это путешествие, шаг за шагом. Так что возьмите своё любимое питьё, устроитесь поудобнее, и отправляйтесь в это модальное приключение вместе со мной!

Bootstrap - Modals Demo

Определение и назначение

Модальное окно в веб-разработке — это что-то вроде всплывающего окна, которое появляется поверх текущей страницы. Это великолепный способ отображения контента, не переходя с текущего вида. Представьте, что вы читаете статью, и вдруг вам нужно больше информации о конкретном термине. Вместо того чтобы открывать новую страницу, модальное окно может появиться с дополнительными деталями, позволяя вам быстро вернуться к чтению. Замечательно, правда?

Bootstrap, наш надёжный друг в веб-дизайне, предоставляет отличный модальный компонент, который легко использовать и который можно легко настроить. Давайте разберём, как его implementировать!

Основная структура модального окна

HTML структура

Давайте начнём с базовой HTML структуры модального окна Bootstrap:

<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Заголовок модального окна</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Закрыть">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Текст основного содержимого модального окна.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Закрыть</button>
        <button type="button" class="btn btn-primary">Сохранить изменения</button>
      </div>
    </div>
  </div>
</div>

Давайте разберём это:

  1. Внешний <div> с классом modal является контейнером для всего нашего модального окна.
  2. Внутри мы имеем modal-dialog, который центрирует содержимое модального окна.
  3. modal-content содержит само содержимое модального окна.
  4. У нас есть три основные секции:
    • modal-header: содержит заголовок и кнопку关闭.
    • modal-body: где идёт основное содержимое.
    • modal-footer: обычно содержит кнопки действий.

Вызов модального окна

Теперь, как сделать так, чтобы это модальное окно появилось? Нам нужно спусковой механизм! Это обычно кнопка:

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Запустить демонстрационное модальное окно
</button>

Обратите внимание на data-toggle="modal" и data-target="#exampleModal". Это говорит Bootstrap что делать (переключить модальное окно) и какое модальное окно 显示 (тот, у которого id "exampleModal").

Не забудьте добавить id к вашему модальному окну, чтобы он соответствовал data-target:

<div class="modal" id="exampleModal" tabindex="-1" role="dialog">
  <!-- Содержимое модального окна -->
</div>

Настройка вашего модального окна

Размеры

Bootstrap позволяет легко изменить размер вашего модального окна. Просто добавьте класс к modal-dialog:

<!-- Маленькое модальное окно -->
<div class="modal-dialog modal-sm">...</div>

<!-- Большое модальное окно -->
<div class="modal-dialog modal-lg">...</div>

<!-- Очень большое модальное окно -->
<div class="modal-dialog modal-xl">...</div>

Выровненное по центру модальное окно

Хотите, чтобы ваше модальное окно было идеально выровнено по центру? Добавьте класс modal-dialog-centered:

<div class="modal-dialog modal-dialog-centered">...</div>

Прокручиваемое модальное окно

Если содержимое вашего модального окна велико, вы можете сделать его прокручиваемым:

<div class="modal-dialog modal-dialog-scrollable">...</div>

Добавление функциональности с помощью JavaScript

Хотя атрибуты данных Bootstrap великолепны для базовой функциональности, иногда вам нужно больше контроля. Вот где comes JavaScript!

// Показать модальное окно
$('#exampleModal').modal('show');

// Скрыть модальное окно
$('#exampleModal').modal('hide');

// Переключить модальное окно
$('#exampleModal').modal('toggle');

Вы также можете listen за событиями модального окна:

$('#exampleModal').on('shown.bs.modal', function () {
  console.log('Модальное окно теперь видимо!');
})

Практический пример: модальное окно "Подтвердить удаление"

Давайте соберём всё вместе с реальным примером. Представьте, что мы создаём приложение для списка задач, и мы хотим confirm перед удалением задачи:

<!-- Кнопка удаления -->
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#deleteModal">
  Удалить задачу
</button>

<!-- Модальное окно -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="deleteModalLabel">Подтвердить удаление</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Закрыть">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        Вы уверены, что хотите удалить эту задачу? Это действие неудаляемо.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Отмена</button>
        <button type="button" class="btn btn-danger" id="confirmDelete">Удалить</button>
      </div>
    </div>
  </div>
</div>

А вот и JavaScript для обработки удаления:

$('#confirmDelete').on('click', function() {
  // Код для удаления задачи идёт сюда
  console.log('Задача удалена!');
  $('#deleteModal').modal('hide');
});

Заключение

Поздравляю! Вы только что узнали всё о модальных окнах Bootstrap. От базовой структуры до настройки и даже практического примера, вы теперь equipped для добавления этой мощной функции в ваши веб-проекты.

Помните, что практика makes perfect. Попробуйте создать разные типы модальных окон, экспериментируйте с размерами и выравниванием, и, самое главное, получайте удовольствие! Кто знает, может быть, вы станете "Мастером модальных окон" среди своих друзей-программистов.

Счастливого кодирования, и пусть ваши модальные окна всегда appear в нужный момент!

Credits: Image by storyset

Предыдущий учебник:
Bootstrap - Демонстрация групп списков
Следующий учебник:
Bootstrap - Демонстрация значков