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

20 апреля 2020 JavaScript Bootstrap

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

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

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

Подтверждение

                ×                
            
            
                
Вы хотите сохранить изменения в этом документе перед закрытием?
                
Если вы не сохраните, ваши изменения будут потеряны.
            
            
                Закрыть
                Сохранить изменения
            
        
    

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

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

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

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

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

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

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

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

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

Запустить модальное окно
    


    
        
            
                

Подтверждение

                ×                
            
            
                
Вы хотите сохранить изменения в этом документе перед закрытием?
                
Если вы не сохраните, ваши изменения будут потеряны.
            
            
                Закрыть
                Сохранить изменения
            
        
    

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

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

Для активации модального окна 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.

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

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

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

Очень большое окно
    

    
        
            
                

Очень большое окно

                ×                
            
            
                
Добавьте класс .modal-xl совместно с .modal-dialog для создания очень большого окна.
            
            
                Закрыть
                OK
            
        
    



Большое окно
    

    
        
            
                

Большое окно

                ×                
            
            
                
Добавьте класс .modal-lg совместно с .modal-dialog для создания большого окна.
            
            
                Закрыть
                OK
            
        
    

    

Малое окно
    

    
        
            
                

Малое окно

                ×                
            
            
                
Добавьте класс .modal-sm совместно с .modal-dialog для создания малого окна.
            
            
                Закрыть
                OK
            
        
    

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

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

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

$(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);
    });
});

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

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

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



    
        
            
                

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

                ×
            
            
                
Здесь текст...
            
            
                Закрыть
                OK
            
        
    

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

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

Отправить сообщение

                ×
            
            
                
                    
                        
                            Имя
                            
                        
                    
                    
                        
                            Фамилия
                            
                        
                    
                
                
                    
                        
                            Email
                            
                        
                    
                
                
                    
                        
                            Комментарий
                            
                        
                    
                
            
            
                Закрыть
                Отправить сообщение
            
        
    

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

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

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

$(document).ready(function(){
    $("#myModal").on("show.bs.modal", function(event){
        // Поместите возвращенный HTML в выбранный элемент
        $(this).find(".modal-body").load("remote.php");
    });
});



Показать модальное окно
    


    
        
            
                

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

                ×
            
            
                
            
            
                Закрыть
                OK
            
        
    

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

Параметры

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

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

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

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

Показать модальное окно



    
        
            
                

Подтверждение

                ×
            
            
                
Вы хотите сохранить изменения в этом документе перед закрытием?
                
Если вы не сохраните, ваши изменения будут потеряны.
            
            
                Закрыть
                Сохранить изменения
            
        
    

Методы

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

.modal(options)

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

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

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

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

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

.modal(‘show’)

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

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

.modal(‘hide’)

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

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

.modal(‘toggle’)

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

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

.modal(‘handleUpdate’)

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

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

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

События

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

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

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

Заключение

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