Bootstrap - Модали: Пособие для начинающих

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

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

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

Компоненты модали

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

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

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

• Внешний <div> с классом "modal" является основным контейнером.
• Внутри мы имеем "modal-dialog", который контролирует форму и положение модали.
• "modal-content" содержит фактическое содержимое нашей модали.
• У нас есть три секции: заголовок, тело и footer.

Статический фоновый экран

Иногда вы хотите, чтобы ваша модаль оставалась на месте до тех пор, пока пользователь не interacted с ней. Вот где на помощь приходит статический фоновый экран:

<div class="modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1">
<!-- Содержимое модали здесь -->
</div>

Добавление data-bs-backdrop="static" предотвращает закрытие модали при нажатии вне нее. data-bs-keyboard="false" предотвращает закрытие с помощью клавиши Esc.

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

У вас много содержимого? Нет проблем! Сделайте вашу модаль прокручиваемой:

<div class="modal-dialog modal-dialog-scrollable">
<!-- Содержимое модали здесь -->
</div>

Добавление класса modal-dialog-scrollable позволяет прокручивать тело модали, оставляя заголовок и footer на месте.

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

Хотите, чтобы ваша модаль была прямо по центру экрана? Легко!

<div class="modal-dialog modal-dialog-centered">
<!-- Содержимое модали здесь -->
</div>

Класс modal-dialog-centered творит чудеса, чтобы выровнять вашу модаль по вертикaли.

Тултипы и поповеры

Вы можете даже использовать тултипы и поповеры внутри ваших модалей. Просто не забудьте инициировать их:

var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', function () {
myInput.focus()
})

Использование格栅ки

Система格栅ки Bootstrap работает внутри модалей тоже! Вот пример:

<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
</div>
</div>
</div>

Это создает двухколоночный макет внутри тела вашей модали.

Разнообразное содержимое модали

Вы можете изменять содержимое вашей модали динамически. Вот как:

var exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', function (event) {
var button = event.relatedTarget
var recipient = button.getAttribute('data-bs-whatever')
var modalTitle = exampleModal.querySelector('.modal-title')
var modalBodyInput = exampleModal.querySelector('.modal-body input')

modalTitle.textContent = 'Новое сообщение для ' + recipient
modalBodyInput.value = recipient
})

Этот скрипт изменяет содержимое модали в зависимости от того, какая кнопка его инициировала.

Переключение между модалями

Вы можете даже переключаться между разными модалями:

<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
<!-- Содержимое первой модали -->
<button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal">Открыть вторую модаль</button>
</div>
<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
<!-- Содержимое второй модали -->
<button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal">Вернуться к первой</button>
</div>

Изменение анимации

Хотите оживить вход вашей модали? Попробуйте изменить анимацию:

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<!-- Содержимое модали -->
</div>

Класс fade добавляет nice плавный эффект. Вы можете создать пользовательские анимации с помощью CSS!

Динамическая высота

Модали могут изменять свою высоту в зависимости от содержимого:

<div class="modal-dialog modal-dialog-scrollable">
<!-- Содержимое модали с разной высотой -->
</div>

Класс modal-dialog-scrollable обеспечивает красивый вид модали независимо от длины содержимого.

Доступность

Всегда учитывайте доступность! Используйте aria-labelledby для ссылок на заголовок модали:

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Заголовок модали</h5>
<!-- Оставшееся содержимое модали -->
</div>
</div>
</div>
</div>

Дополнительные размеры

Модали бывают разных размеров:

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

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

<!-- Экстра большая модаль -->
<div class="modal-dialog modal-xl">...</div>

Полноэкранная модаль

Хотите, чтобы ваша модаль занимала весь экран? Используйте классы полноэкранной модали:

<div class="modal-dialog modal-fullscreen">
<!-- Содержимое модали -->
</div>

Вы также можете сделать ее полноэкранной только на определенных размерах экрана:

<div class="modal-dialog modal-fullscreen-sm-down">
<!-- Содержимое модали -->
</div>

Эта модаль будет полноэкранной на малых экранах и ниже.

И вот и все! Вы теперь equipped с знаниями для создания потрясающих модалей с использованием Bootstrap. Помните, что практика делает perfect, так что не бойтесь экспериментировать с этими концепциями. Счастливого кодирования!

Метод	Описание
.modal(options)	Активирует ваш контент как модаль. Принимает optional options object.
.modal('toggle')	В手动ном режиме переключает модаль.
.modal('show')	В手动ном режиме открывает модаль.
.modal('hide')	В manual mode hides a modal.
.modal('handleUpdate')	В manual mode readjusts the modal's position if the height of a modal changes while it is open (i.e. in case a scrollbar appears).
.modal('dispose')	Удаляет модаль элемента.

Credits: Image by storyset