Уроки по фреймворку Bootstrap 4

Автор учебного курса: Саакян Артак Арамович, студент гр. ИТк-401 ФГАОУ ВО «РГППУ.

Скачать Notepad++ Portable
Скачать материалы к учебному курсу - папка kurs_bootstrap.zip (1 Мб)




Урок 4. Модальное окно

Предварительно изучите теорию 3. Модальное окно и карусель

Модальное окно

Bootstrap позволяет добавить модальное диалоговое окно на наш сайт. Модальное — это диалоговое окно, которое получает фокус, в то время как остальная часть экрана затемняется. Это заставляет пользователя принять какие-то действия в диалоговом окне, прежде чем продолжить работать дальше.

1. Чтобы создать модальное окно, используем класс .modal совместно с другими классами .modal-*, которые определяют каждый раздел модального окна.

1. Создайте кнопку <button> с классами .btn .btn-primary и атрибутами data-toggle="modal", data-target="#modalWindow", чтобы по клику открыть модальное окно (рисунок 1)

2. Напишите блок <div> с класами .modal, .fade и идентификатором #modalWindow, котороя должна совпадать с атрибутом кнопки.

3. Внутри блока с класса .modal напишите элемент <div> с классом .modal-dialog, внутри этого элемента напишите блок <div> с классом .modal-content.

4. Внутри блока .modal-content, пропишите 3 блока с классом .modal-header, modal-body и .modal-footer.

5. Внутри блока .modal-header напишите заголовок <h4> с классом .modal-title и идентификатором #modalLabel, текст заголовка напишите «Заголовок модального окна». Для кнопки <button> напишите класс .close и атрибут data-dismiss="modal", внутри кнопки напишите тег <span>, а внутри этога тега поместите символ &times;.

6. В .modal-body поместите текст «Основной текст модального окна».

7. В .modal-footer напишите элемент кнопки <button> с классом .btn, .btn-secondary и атрибутом data-dismiss="modal", внутри кнопки поместите текст «Закрыть».

Окончательный код должен выглядеть так (рисунок 2):

<button class="btn btn-primary" data-toggle="modal" data-target="#modalWindow">
  Открыть модальное окно
</button>
<div class="modal fade" id="modalWindow">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="modalLabel">Заголовок модального окна</h4>
        <button class="close" data-dismiss="modal">
          <span>&times;</span>
        </button>
      </div>
      <div class="modal-body">Основной текст модального окна</div>
      <div class="modal-footer">
        <button class="btn btn-secondary" data-dismiss="modal">Закрыть</button>
      </div>
    </div>
  </div>
</div>
Рисунок 1 — Кнопка модального окна
Рисунок 2 — Модальное окно

При нажатии на кнопку должно открыться вот такое модальное окно. Но нам обязательно нужно подключить 3 скрипта (jquery-3.6.0.min.js, popper.min.js, bootstrap.min.js), без скриптов модальное окно не откроется.

Размер модального окна

Модальные окна по умолчанию имеют средний размер. Но можно указать маленький или большой размер при необходимости.

8. Добавьте класс .modal-sm к .modal-dialog, чтобы сделать модальное окно маленьким (рисунок 3).

<div class="modal-dialog modal-sm">
Рисунок 3 — Результат

Большое модальное окно

9. Чтобы сделать модальное окно большим, нужно добавить класс .modal-lg к .modal-dialog (рисунок 4).

<div class="modal-dialog modal-lg">
Рисунок 4 — Результат

Убрать эффект затухания

10. Удалите класс .fade, чтобы избавиться от эффекта затухания при открытии и закрытии модального окна.

<div class="modal" id="modalWindow">

Статический фон

11. Для того чтобы модальное окно было статическим и при клике вне модального окна или нажатием на клавишу ESC он не закрывался, нужно будет добавить к элементу .modal два атрибута data-backdrop="static" и data-keyboard="false".

<div class="modal fade" id="modalWindow" data-backdrop="static" data-keyboard="false">

Результат выполнения кода (рисунок 5):

Рисунок 5 — Результат

Прокрутка длинного содержимого

Когда модальные элементы становятся слишком длинными для зоны видимости девайса, они прокручиваются независимо от самой страницы.

12. Замените блок <div> с классом .modal-body на этот код (рисунок 6):

<div class="modal-body">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magnam ipsum perspiciatis vero adipisci soluta molestiae nostrum, culpa ad nesciunt, ut velit temporibus alias, quaerat, molestias voluptatem impedit architecto mollitia id praesentium? Vitae quasi suscipit odit beatae quidem culpa quo, provident reiciendis quaerat dignissimos velit consequatur fugiat delectus impedit enim laudantium doloremque sit excepturi aliquid, fugit. Inventore aspernatur doloribus quisquam explicabo? Aliquid culpa explicabo velit deserunt, ratione soluta blanditiis saepe perferendis aspernatur ex fugit repellendus impedit, libero minima modi magnam. Laboriosam ipsam sequi ipsum dolorum, in animi quasi quidem expedita quam mollitia voluptas quis doloremque incidunt soluta temporibus dicta illum eaque nulla vero id sunt voluptatum ullam esse! Ut impedit, eaque. Maxime consectetur, magnam explicabo tempore pariatur tempora recusandae totam autem qui ex eaque culpa consequuntur quo, veniam inventore quos necessitatibus quidem expedita illum fugit nemo deleniti aspernatur. Maiores ea quia non sapiente voluptate nobis inventore iusto dolores architecto distinctio, dicta illum repellendus, explicabo doloribus exercitationem sunt neque rem. Obcaecati provident eligendi similique ratione fuga quia dolorem, quae, ipsum amet dolor quod minima rerum expedita voluptas velit neque, eos magnam qui officiis voluptate dolores ab, ipsam! Veniam, quo illo? Dolorem sint, beatae illo voluptatem omnis veniam maiores in expedita reiciendis dolorum consequuntur veritatis a earum modi assumenda deleniti, aliquam commodi voluptatum. Minus aliquid a quod molestiae recusandae, consequatur facere ab, quibusdam? Explicabo, est, molestiae distinctio reiciendis aliquam et labore iure nemo asperiores iusto deserunt totam vitae necessitatibus repellendus eveniet fugit magnam amet quia soluta odit quam quis, animi vel nostrum. Temporibus.
</div>
Рисунок 6 — Результат

13. Чтобы модальное окно можно было прокручивать, нужно добавить класс .modal-dialog-scrollable к .modal-dialog (рисунок 7).

<div class="modal-dialog modal-dialog-scrollable">
Рисунок 7 — Результат

Вертикальное центрирование

14. Чтобы при нажатии на кнопку модальное окно центрировалось по вертикали, нужно добавить класс .modal-dialog-centered в .modal-dialog (рисунок 8).

<div class="modal-dialog modal-dialog-centered">
Рисунок 8 — Результат

Контрольное задание

  1. Самостоятельно напишите модальное окно использую библиотеку
  2. Добавьте в модальное окно длинный текст и сделайте, чтобы прокрутка была в самом модальном окне.