Модальное окно Официальная документация

Copied!

Пример

<div class="modal fade" id="modal-example">
	<div class="modal-dialog modal-sm">
		<div class="modal-content">
			<div class="modal-header">
				<button class="close" data-dismiss="modal"></button>
				<h4 class="modal-title">Заголовок модального окна</h4>
			</div>
			<div class="modal-body">
				Контент модального окна
			</div><!-- .modal-body -->
			<div class="modal-footer">
				<button type="button" class="btn btn-primary" data-dismiss="modal">Закрыть</button>
				<button type="button" class="btn btn-default">Сохранить</button>
			</div><!-- .modal-footer -->
		</div><!-- modal-content -->
	</div><!-- .modal-dialog -->
</div><!-- .modal -->

Размеры

У модальных окон есть четире размера, доступных к изменению через классы которые надо размещать в элементе .modal-dialog.

Размер Класс Ширина Пример
Small .modal-sm 400px Открыть
Default По умолчанию 500px Открыть
Large .modal-lg 770px Открыть
Extra large .modal-xl 1140px Открыть

Шапка без фона

<button class="btn btn-default" data-toggle="modal" data-target="#modal-example-default-header">Запустить модальное окно</button>

<div class="modal fade" id="modal-example-default-header">
	<div class="modal-dialog modal-sm">
		<div class="modal-content">
			<div class="modal-header">
				<button class="close" data-dismiss="modal"></button>
				<h4 class="modal-title">Заголовок окна</h4>
			</div>
			<div class="modal-body">
				Контент окна
			</div><!-- .modal-body -->
			<div class="modal-footer">
				<button type="button" class="btn btn-primary" data-dismiss="modal">Закрыть</button>
				<button type="button" class="btn btn-default">Сохранить</button>
			</div><!-- .modal-footer -->
		</div><!-- modal-content -->
	</div><!-- .modal-dialog -->
</div><!-- .modal -->

Шапка с цветным фоном

Для добавления фона добавьте классы фонов, страница цветов. Для темных фонов используйте белый текст добавляя сласс .text-white. Самые используемые .bg-blue .bg-orange .bg-red

<button class="btn btn-default" data-toggle="modal" data-target="#modal-example-blue-header">Пример синего фона</button>

<div class="modal fade" id="modal-example-blue-header">
	<div class="modal-dialog modal-sm">
		<div class="modal-content">
			<div class="modal-header bg-blue text-white">
				<button class="close" data-dismiss="modal"></button>
				<h4 class="modal-title">Синий фон</h4>
			</div>
			<div class="modal-body">
				Контент окна
			</div><!-- .modal-body -->
			<div class="modal-footer">
				<button type="button" class="btn btn-primary" data-dismiss="modal">Закрыть</button>
				<button type="button" class="btn btn-default">Сохранить</button>
			</div><!-- .modal-footer -->
		</div><!-- modal-content -->
	</div><!-- .modal-dialog -->
</div><!-- .modal -->
<button class="btn btn-warning" data-toggle="modal" data-target="#modal-example-orange-header">Пример оражего фона</button>

<div class="modal fade" id="modal-example-orange-header">
	<div class="modal-dialog modal-sm">
		<div class="modal-content">
			<div class="modal-header bg-orange text-white">
				<button class="close" data-dismiss="modal"></button>
				<h4 class="modal-title">Оранжевый фон</h4>
			</div>
			<div class="modal-body">
				Контент окна
			</div><!-- .modal-body -->
			<div class="modal-footer">
				<button type="button" class="btn btn-primary" data-dismiss="modal">Закрыть</button>
				<button type="button" class="btn btn-default">Сохранить</button>
			</div><!-- .modal-footer -->
		</div><!-- modal-content -->
	</div><!-- .modal-dialog -->
</div><!-- .modal -->
<button class="btn btn-danger" data-toggle="modal" data-target="#modal-example-red-header">Пример красного фона</button>

<div class="modal fade" id="modal-example-red-header">
	<div class="modal-dialog modal-sm">
		<div class="modal-content">
			<div class="modal-header bg-red text-white">
				<button class="close" data-dismiss="modal"></button>
				<h4 class="modal-title">Красный фон</h4>
			</div>
			<div class="modal-body">
				Контент окна
			</div><!-- .modal-body -->
			<div class="modal-footer">
				<button type="button" class="btn btn-primary" data-dismiss="modal">Закрыть</button>
				<button type="button" class="btn btn-default">Сохранить</button>
			</div><!-- .modal-footer -->
		</div><!-- modal-content -->
	</div><!-- .modal-dialog -->
</div><!-- .modal -->

Выравнивание кнопок в подвале

По умолчанию кнопки выровнены к правому краю, для выравнивания к левому краю использутеся .modal-footer-left

<button class="btn btn-default" data-toggle="modal" data-target="#modal-example-footer-left">Открыть окно</button>

<div class="modal fade" id="modal-example-footer-left">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button class="close" data-dismiss="modal"></button>
				<h4 class="modal-title">Заголовок</h4>
			</div>
			<div class="modal-body">
				Контент окна
			</div><!-- .modal-body -->
			<div class="modal-footer modal-footer-left">
				<button type="button" class="btn btn-primary" data-dismiss="modal">Закрыть</button>
				<button type="button" class="btn btn-default">Сохранить</button>
			</div><!-- .modal-footer -->
		</div><!-- modal-content -->
	</div><!-- .modal-dialog -->
</div><!-- .modal -->

Запустить через атрибуты

Модальное окно можно запустить через атрибуты или javascript, допустим есть модальное окно с id="my-modal", то кнопка для запуска будет такой:

<button class="btn" data-toggle="modal" data-target="#my-modal">Запустить</button>

Использовать через javascript

$('#my-modal').modal('show'); // Показать окно
$('#my-modal').modal('hide'); // Закрыть окно

Готовые шаблоны модальных окон

Универсальное системное окошко без фона в шапке

Заголовок окна

Контент окна 
<div class="modal fade">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button class="close" data-dismiss="modal"></button>
				<h4 class="modal-title">Заголовок окна</h4>
			</div>
			<div class="modal-body">
				Контент окна
			</div><!-- .modal-body -->
			<div class="modal-footer">
				<button type="button" class="btn btn-primary" data-dismiss="modal">Закрыть</button>
				<button type="button" class="btn btn-default">Сохранить</button>
			</div><!-- .modal-footer -->
		</div><!-- modal-content -->
	</div><!-- .modal-dialog -->
</div><!-- .modal -->

Универсальное системное окошко с цветной шапкой

Заголовок окна

Контент окна 
<div class="modal fade">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header bg-blue text-white">
				<button class="close" data-dismiss="modal"></button>
				<h4 class="modal-title">Заголовок окна</h4>
			</div>
			<div class="modal-body">
				Контент окна
			</div><!-- .modal-body -->
			<div class="modal-footer">
				<button type="button" class="btn btn-primary" data-dismiss="modal">Закрыть</button>
				<button type="button" class="btn btn-default">Сохранить</button>
			</div><!-- .modal-footer -->
		</div><!-- modal-content -->
	</div><!-- .modal-dialog -->
</div><!-- .modal -->

Окошко с предупреждением о невозможности отмены действия

Удалить модуль. Продолжить?

Нажимая "Подтвердить" Вы соглашаетесь с тем, что данный объект будет безвозвратно удалён. Все связанные с ним элементы будут отключены. Подтвердить?

<div class="modal fade modal-remove-confirm">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button class="close" data-dismiss="modal"></button>
				<h4 class="modal-title">Удалить модуль. Продолжить?</h4>
			</div>
			<div class="modal-body">
				<p class="mb-0">Нажимая "Подтвердить" Вы соглашаетесь с тем, что данный объект будет безвозвратно удалён. Все связанные с ним элементы будут отключены. Подтвердить?</p>
			</div>
			<div class="modal-footer">
				<button class="btn btn-default" data-remove-element>Подтвердить</button>
				<button class="btn btn-primary" data-dismiss="modal">Отменить</button>
			</div>
		</div>
	</div>
</div>

Окошко с жестким предупреждением о невозможности отмены действия

Удалить модуль. Продолжить?

Нажимая "Подтвердить" Вы соглашаетесь с тем, что данный объект будет безвозвратно удалён. Все связанные с ним элементы будут отключены. Подтвердить?

<div class="modal fade modal-remove-confirm">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button class="close" data-dismiss="modal"></button>
				<h4 class="modal-title">Удалить модуль. Продолжить?</h4>
			</div><!-- .modal-header -->
			<div class="modal-body">
				<p>Нажимая "Подтвердить" Вы соглашаетесь с тем, что данный объект будет безвозвратно удалён. Все связанные с ним элементы будут отключены. Подтвердить?</p>
				<div class="form-group form-group-last">
					<label class="form-control-checkbox pb-0">
						<input type="checkbox">
						<span></span>Я понимаю, что данное действие нельзя будет отменить
					</label>
				</div>
			</div><!-- .modal-body -->
			<div class="modal-footer">
				<button class="btn btn-default" disabled data-remove-element>Подтвердить</button>
				<button class="btn btn-primary" data-dismiss="modal">Отменить</button>
			</div><!-- .modal-footer -->
		</div><!-- modal-content -->
	</div><!-- .modal-dialog -->
</div><!-- .modal -->

Разные шаблоны модальных окон

Счета

При ражатии на кнопки, открываются окна и одновременно копируется код окна в буфер обмена.

Статус счета

Статус отправки письма

Редактирование данных

Другое

Переменные в форме редактора

Добавление продуктов