Делаем окна Bootstrap
Генератор модальных окон Bootstrap 3, 4 и 5. Создавайте адаптивные popup-окна с настройкой размеров, анимации и функционала. Готовые шаблоны для форм, уведомлений и диалогов. Копируйте чистый HTML и JS код для любых версий Bootstrap.
Настройки
Должен быть уникальным на странице, используйте только латинские буквы, цифры и дефисы
Можно использовать HTML разметку
Обычно содержит кнопки действий
Готовые шаблоны
Формы
Диалоги
Код для копирования
HTML код для Bootstrap 3
<!-- Код модального окна для Bootstrap 3 -->
JavaScript
// Показать модальное окно
$('#myModal').modal('show');
// Скрыть модальное окно
$('#myModal').modal('hide');
// События
$('#myModal').on('shown.bs.modal', function () {
// Действия после показа
});
$('#myModal').on('hidden.bs.modal', function () {
// Действия после скрытия
});
HTML код для Bootstrap 4
<!-- Код модального окна для Bootstrap 4 -->
JavaScript
// Показать модальное окно
$('#myModal').modal('show');
// Скрыть модальное окно
$('#myModal').modal('hide');
// События
$('#myModal').on('shown.bs.modal', function () {
// Действия после показа
});
$('#myModal').on('hidden.bs.modal', function () {
// Действия после скрытия
});
HTML код для Bootstrap 5
<!-- Код модального окна для Bootstrap 5 -->
JavaScript
// Инициализация
var myModal = new bootstrap.Modal(document.getElementById('myModal'));
// Показать модальное окно
myModal.show();
// Скрыть модальное окно
myModal.hide();
// События
document.getElementById('myModal').addEventListener('shown.bs.modal', function () {
// Действия после показа
});
document.getElementById('myModal').addEventListener('hidden.bs.modal', function () {
// Действия после скрытия
});
Важная информация
Для работы кода не забудьте подключить соответствующие версии Bootstrap:
- Bootstrap 3: CSS и JS (включая jQuery)
- Bootstrap 4: CSS, JS и jQuery
- Bootstrap 5: CSS и JS (jQuery не требуется)
Иконки в шаблонах используют Glyphicons, которые доступны только в Bootstrap 3.
Инструкция по использованию
Как использовать:
- Заполните параметры модального окна в левой колонке
- Выберите нужную версию Bootstrap во вкладках справа
- Скопируйте HTML и JavaScript код
- Вставьте код в свой проект
- Убедитесь, что подключены соответствующие версии Bootstrap
Особенности:
- Инструмент поддерживает использование HTML
- Генерирует код для Bootstrap 3, 4 и 5
- Генерирует код для 3 размеров окон
- Поддерживает готовые шаблоны для разных сценариев
- Позволяет предпросмотр результата (для BS3)
Об иконках Glyphicons:
В шаблонах используются иконки из набора Glyphicons, которые входят в состав Bootstrap 3. Примеры иконок:
В Bootstrap 4 и 5 Glyphicons не включены по умолчанию. Вы можете:
- Подключить Glyphicons отдельно
- Заменить на иконки Font Awesome
- Использовать другие иконки или убрать их
Ещё для Bootstrap
Версия: 07.04.25