Модальное окно Bootstrap: использование и настройка

Модальное окно Bootstrap: использование и настройка

20 апреля 2020 JavaScript

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

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

Вы можете легко создавать очень умные и гибкие диалоговые окна с помощью модального плагина Bootstrap. В следующем примере представлена ​​базовая структура для создания простого модального окна с заголовком, телом сообщения и нижним колонтитулом, содержащим кнопки действий для пользователя.

<div id="myModal" 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="close" data-dismiss="modal">×</button>                
            </div>
            <div class="modal-body">
                <p>Вы хотите сохранить изменения в этом документе перед закрытием?</p>
                <p class="text-secondary"><small>Если вы не сохраните, ваши изменения будут потеряны.</small></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>

Для того, чтобы код сработал, конечно же, вы должны подключить bootstrap.min.css в внутри тегов <head></head>, например так:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

И перед закрывающим тегом </body> подключить библиотеку jQuery, bootstrap.min.js, popper.min.js и скрипт, инициализирующий запуск модального окна:

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<script>
	$(document).ready(function(){
		$("#myModal").modal('show');
	});
</script>

Функция modal() запускает модальное окно с указанным ID, в данном случае myModal.

Если вы запустите приведенный выше пример, он автоматически создаст модальное окно, когда DOM будет полностью загружен через JavaScript. Результат будет выглядеть примерно так:

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

Совет: всегда старайтесь размещать HTML-код модального окна в позиции верхнего уровня в вашем документе, предпочтительно сразу после открывающего тега <body>, чтобы избежать помех от других элементов, в противном случае это может повлиять на внешний вид или функциональность модального окна.

Активируйте модальные окна с помощью data-* атрибутов

Вы можете активировать модальное окно Bootstrap, нажав на кнопку или ссылку через data-* атрибуты без написания кода JavaScript. Посмотрите на следующий пример, чтобы увидеть, как это работает:

<!-- HTML-код кнопки (триггер модального окна)-->
<a href="#myModal" class="btn btn-lg btn-primary" data-toggle="modal">Запустить модальное окно</a>
    
<!-- HTML-код модального окна -->
<div id="myModal" 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="close" data-dismiss="modal">×</button>                
            </div>
            <div class="modal-body">
                <p>Вы хотите сохранить изменения в этом документе перед закрытием?</p>
                <p class="text-secondary"><small>Если вы не сохраните, ваши изменения будут потеряны.</small></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>

Приведенный выше пример запускает модальное окно при нажатии кнопки «Запустить модальное окно». Для лучшего понимания давайте рассмотрим этот код по частям.

Объяснение кода

Для активации модального окна Bootstrap через data-* атрибуты нам в основном нужны два компонента — элемент контроллера, такой как кнопка или ссылка, и сам модальный элемент.

Внешний контейнер каждого модального элемента в документе должен иметь уникальный идентификатор (в данном случае id="myModal"), чтобы на него можно было ориентироваться через data-target (для кнопок) или href (для гиперссылок) атрибут элемента контроллера.

Атрибут data-toggle=»modal» требуется добавить в элемент контроллера, например кнопку или привязку, вместе с атрибутом data-target="#myModal" или href="#myModal", чтобы обозначить элемент как контроллер всплывающих окон.

Класс .modal-dialog устанавливает ширину, а также горизонтальное и вертикальное выравнивание модального окна. В то время как класс .modal-content устанавливает стили, такие как цвет текста и фона, границы, закругленные углы и т. д.

Все остальное, я думаю, не требует пояснений, например, элемент .modal-header определяет заголовок для модального окна, который обычно содержит заголовок и кнопку закрытия, тогда как элемент .modal-body содержит фактический контент, такой как текст, изображения, формы и т.д., а элемент .modal-footer определяет нижний колонтитул, который обычно содержит кнопки действий для пользователя.

Класс .fade в элементе .modal добавляет эффект анимации исчезновения и скольжения при отображении и скрытии модального окна. Если вы хотите, чтобы окно просто появлялось без какого-либо эффекта, вы можете просто удалить этот класс. Кроме того, когда модальные окна становятся слишком большими для просмотра, они прокручиваются независимо от самой страницы.

Активируйте модальные окна через JavaScript

Вы также можете активировать модальное окно Bootstrap через JavaScript — просто вызовите метод modal() с идентификатором окна или его селектором класса в вашем коде JavaScript.

<script>
$(document).ready(function(){
    $(".btn").click(function(){
        $("#myModal").modal("show");
    });
});
</script>

Изменяйте размеры модальных окон

Bootstrap дает вам возможность масштабировать модальные окна. Вы можете создавать малые, большие и очень большие окна, добавив дополнительный класс .modal-sm, .modal-lg или .modal-xl соответственно в элемент с классом.modal-dialog. Пример:

<!-- Очень большое окно -->
<button class="btn btn-primary" data-toggle="modal" data-target="#extraLargeModal">Очень большое окно</button>
    
<div id="extraLargeModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Очень большое окно</h5>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>                
            </div>
            <div class="modal-body">
                <p>Добавьте класс <code>.modal-xl</code> совместно с <code>.modal-dialog</code> для создания очень большого окна.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Закрыть</button>
                <button type="button" class="btn btn-primary">OK</button>
            </div>
        </div>
    </div>
</div>

<!-- Большое окно -->
<button class="btn btn-primary" data-toggle="modal" data-target="#largeModal">Большое окно</button>
    
<div id="largeModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Большое окно</h5>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>                
            </div>
            <div class="modal-body">
                <p>Добавьте класс <code>.modal-lg</code> совместно с <code>.modal-dialog</code> для создания большого окна.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Закрыть</button>
                <button type="button" class="btn btn-primary">OK</button>
            </div>
        </div>
    </div>
</div>
    
<!-- Малое окно -->
<button class="btn btn-primary" data-toggle="modal" data-target="#smallModal">Малое окно</button>
    
<div id="smallModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Малое окно</h5>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>                
            </div>
            <div class="modal-body">
                <p>Добавьте класс <code>.modal-sm</code> совместно с <code>.modal-dialog</code> для создания малого окна.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Закрыть</button>
                <button type="button" class="btn btn-primary">OK</button>
            </div>
        </div>
    </div>
</div>

Совет: максимальная ширина модального окна по умолчанию будет 500px, тогда как максимальная ширина малого, большого и очень большого будет 300px, 800px и 1140px, соответственно.

Изменяйте содержимое модального окна на основе триггерной кнопки

Часто несколько модальных окон на веб-страницах имеют почти одинаковый контент с небольшими отличиями. Вы можете использовать модальные события для создания разных модальных окон на основе одного и того же модального HTML. В следующем примере показано, как изменить заголовок модального окна в соответствии со значением атрибута data-title кнопки триггера.

<script>
$(document).ready(function(){
    $("#myModal").on("show.bs.modal", function(event){
        // Получить кнопку, которая запустила окно
        var button = $(event.relatedTarget);

        // Извлечь значение из атрибута пользовательских данных- *
        var titleData = button.data("title");
        $(this).find(".modal-title").text(titleData);
    });
});
</script>

Центрируйте окна вертикально

Просто добавьте класс .modal-dialog-centered к элементу с классом .modal-dialog, чтобы вертикально отцентрировать окно. Если у модального окна длинный контент, вы можете дополнительно применить класс .modal-dialog-scrollable к .modal-dialog, чтобы сделать контентную часть прокручиваемой. Пример:

<!-- HTML-код кнопки (триггер модального окна) -->
<a href="#modalCenter" role="button" class="btn btn-primary" data-toggle="modal">Вертикально-отцентрированное окно</a>

<!-- HTML-код модального окна -->
<div id="modalCenter" class="modal fade" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Вертикальное выравнивание</h5>
                <button type="button" class="close" data-dismiss="modal">×</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">OK</button>
            </div>
        </div>
    </div>
</div>

Используйте сетку Bootstrap внутри модальных окон

Вы также можете использовать сетку Bootstrap в модальных окнах. Просто используйте класс .row для создания строк и классы .col- *, .col-sm- *, .col-md- *, .col-lg- * и .col-xl- * для создания столбцов внутри элемента с классом .modal. Давайте посмотрим на пример:

<div id="myModal" class="modal fade" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Отправить сообщение</h5>
                <button type="button" class="close" data-dismiss="modal">×</button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-6">
                        <div class="form-group">
                            <label>Имя</label>
                            <input type="text" class="form-control">
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="form-group">
                            <label>Фамилия</label>
                            <input type="text" class="form-control">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <div class="form-group">
                            <label>Email</label>
                            <input type="email" class="form-control">
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12">
                        <div class="form-group">
                            <label>Комментарий</label>
                            <textarea class="form-control"></textarea>
                        </div>
                    </div>
                </div>
            </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>

Загружайте контент в модальные окна через Ajax

Вы также можете загрузить удаленный контент в модальном окне Bootstrap через Ajax.

В следующем примере содержимое внутри модального окна будет вставлено из удаленного файла после активации с использованием метода jQuery load() и события Bootstrap show.bs.modal.

<!-- jQuery-код (для загрузки контента через Ajax) -->
<script>
$(document).ready(function(){
    $("#myModal").on("show.bs.modal", function(event){
        // Поместите возвращенный HTML в выбранный элемент
        $(this).find(".modal-body").load("remote.php");
    });
});
</script>

<!-- HTML-код кнопки (триггер модального окна) -->
<button type="button" class="btn btn-lg btn-primary" data-toggle="modal" data-target="#myModal">Показать модальное окно</button>
    
<!-- HTML-код модального окна -->
<div id="myModal" class="modal fade" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Модальное окно с Ajax</h5>
                <button type="button" class="close" data-dismiss="modal">×</button>
            </div>
            <div class="modal-body">
                <!-- Контент загруженный из файла "remote.php" -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Закрыть</button>
                <button type="button" class="btn btn-primary">OK</button>
            </div>
        </div>
    </div>
</div>

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

Параметры

Существуют определенные параметры, которые можно передать методу modal() для настройки функциональности модального режима. Опции могут быть переданы через data-* атрибуты или JavaScript.

Для настройки модальных опций с помощью data-* атрибутов просто добавьте имя опции к data-, например data-background="static", data-keyboard="false" и т. д.

ИмяТипЗначение по умолчаниюОписание
backdropboolean
или string 
static
trueВключает элемент модального фона (черная область наложения). В качестве альтернативы, вы можете указать static фон, который не закрывает модальное окно при щелчке.
keyboardbooleantrueЗакрывает модальное окно при нажатии клавиши ESC.
focusbooleantrueУстанавливает focus на модальном окне при инициализации.
showbooleantrueПоказывает модальное окно при инициализации или активации.

Data-* атрибуты обеспечивают простой способ установки параметров модальных окон, однако JavaScript является наиболее предпочтительным способом, поскольку он предотвращает повторный вызов функций.

В следующем примере мы установили для параметра background фон static, что предотвращает закрытие модального окна при щелчке за пределами модального объекта, то есть черной области наложения.

<!-- HTML-код кнопки (триггер модального окна) -->
<button type="button" class="btn btn-lg btn-primary" data-target="#myModal" data-toggle="modal">Показать модальное окно</button>

<!-- HTML-код модального окна -->
<div id="myModal" class="modal fade" data-backdrop="static" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Подтверждение</h5>
                <button type="button" class="close" data-dismiss="modal">×</button>
            </div>
            <div class="modal-body">
                <p>Вы хотите сохранить изменения в этом документе перед закрытием?</p>
                <p class="text-secondary"><small>Если вы не сохраните, ваши изменения будут потеряны.</small></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>

Методы

Это стандартные методы загрузки модальных окон:

.modal(options)

Этот метод активирует контент как модальный. Это также позволяет вам устанавливать параметры для модальных окон.

Код jQuery в следующем примере будет препятствовать закрытию модального окна, когда пользователь нажимает на фон, то есть на черную область наложения позади модального окна.

<script>
$(document).ready(function(){
    $(".launch-modal").click(function(){
        $("#myModal").modal({
            backdrop: 'static'
        });
    }); 
});
</script>

Следующий код jQuery предотвратит закрытие модального окна при нажатии клавиши ESC.

<script>
$(document).ready(function(){
    $(".launch-modal").click(function(){
        $("#myModal").modal({
            keyboard: false
        });
    }); 
});
</script>

.modal(‘show’)

Этот метод может быть использован для открытия модального окна вручную.

<script>
$(document).ready(function(){
    $(".show-modal").click(function(){
        $("#myModal").modal('show');
    });
});
</script>

.modal(‘hide’)

Этот метод можно использовать, чтобы скрыть модальное окно вручную.

<script>
$(document).ready(function(){
    $(".hide-modal").click(function(){
        $("#myModal").modal('hide');
    });
});
</script>

.modal(‘toggle’)

Этот метод можно использовать для переключения отображения модального окна вручную.

<script>
$(document).ready(function(){
    $(".toggle-modal").click(function(){
        $("#myModal").modal('toggle');
    });
});
</script>

.modal(‘handleUpdate’)

Этот метод перенастраивает положение модального слоя, чтобы противостоять рывку, возникающему из-за появления полосы прокрутки в области просмотра, в случае, если высота модального окна изменяется таким образом, что она становится выше, чем высота области просмотра, когда она открыта.

Типичным примером этого сценария является показ скрытых элементов внутри модального окна с помощью JavaScript или загрузка содержимого внутри модального окна с помощью Ajax после активации.

<script>
$(document).ready(function(){
    $(".show-text").click(function(){
        $('#myModal').find(".lots-of-text").toggle();
        $('#myModal').modal('handleUpdate')
    });
});
</script>

События

Класс Bootstrap .modal включает несколько событий для подключения к модальной функциональности.

СобытиеОписание
show.bs.modalСобытие происходит, когда вызывается метод show(), предназначенный для открытия модального окна.
shown.bs.modalСобытие происходит, когда модальное окно становится видимым для пользователя, т.е. когда оно будет полностью отрисовано с помощью стилей CSS.
hide.bs.modalСобытие происходит, когда вызывается метод hide(), который предназначен для скрытия модального окна.
hidden.bs.modalСобытие происходит, когда модальное окно становится полностью невидимым для пользователя, т.е. когда будут отработаны полностью все CSS-свойства, выполняющие этот процесс.

В следующем примере отображается сообщение с предупреждением, когда модальное окно станет полностью невидимым для пользователя.

<script>
$(document).ready(function(){
    $("#myModal").on('hidden.bs.modal', function(){
        alert("Модальное окно было полностью закрыто.");
    });
});
</script>

Заключение

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

Если вам понравилась статья, вы можете отблагодарить автора любой суммой, какую сочтете для себя приемлемой:
Остались вопросы по статье? Задайте их прямо сейчас!
Похожие записи
WordPress создание темы с нуля

Давно хотел написать подробное руководство о том, как создать тему на WordPress с нуля. Вам это пригодится: если вы хотите научиться разрабатывать сайты на WP, а не просто устанавливать шаблонные решения; вы хотите сделать уникальный дизайн для своего сайта или Читать далее

Простая пагинация на PHP и MySQL

Это руководство о том, как сделать простое разбиение на страницы, используя PHP и MySQL с плагином jQuery Simple Pagination.Simplepagination.js - это простой плагин для jQuery, поддерживающий CSS3 и Bootstrap. Шаг 1: Включаем все js и css файлы Плагин jQuery Simple Pagination скачиваем отсюда. <link rel="stylesheet" Читать далее

Календарь в input для ввода даты

Чтобы при вводе даты в input выпадал удобный календарик можно воспользоваться двумя способами: стандартным полем HTML5 type="date" или JavaScript библиотекой Bootstrap Datepicker. Рассмотрим подробнее эти способы в этой статье. Календарь для input HTML5 Просто применяем у input атрибут type="date" или Читать далее

Как сделать в Bootstrap 5 колонок

Возникла задача вывести 5 одинаковых адаптивных колонок на сайте с Bootstrap. Помогло это решение. У меня был Bootrstrap 4, но есть аналогичное решение и для 3 версии, там ещё проще. 5 колонок в Bootstrap 4 Добавляем данный код в файл Читать далее

Живой поиск jQuery

Сегодня я расскажу об одном отличном jQuery плагине о котором вы могли не знать. С его помощью можно быстро сделать живой поиск на странице сайта с множеством элементов. Называется он HideSeek. Плагин очень прост в использовании, но в то же Читать далее

Один комментарий на «Модальное окно Bootstrap: использование и настройка»

Добавить комментарий

*

code