English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Основной учебник Bootstrap4

Модальные окна Bootstrap4

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

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

Модальное окно (Modal) - это дочернее окно, которое перекрывает родительское окно. Как правило, цель - показать содержимое из отдельного источника, которое можно взаимодействовать с ним, не покидая родительское окно. Дочернее окно может предоставлять информацию и взаимодействие.

Как создать модальное окно

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

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　Пример</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>Пример модального окна</h2>
　　<!--　Кнопка: используется для открытия модального окна　-->
　　<button　type="button"　class="btn　btn-primary"　data-toggle="modal"　data-target="#myModal">
　　　　Открывать модальное окно
　　</button>
　　　
　　<!--　模态框　-->
　　<div　class="modal　fade"　id="myModal">
　　　　<div　class="modal-dialog">
　　　　　　<div class="modal-content">
　　　
　　　　　　　　<!-- Заголовок модального окна -->
　　　　　　　　<div class="modal-header">
　　　　　　　　　　<h4 class="modal-title">Заголовок модального окна</h4>
　　　　　　　　　　<button type="button" class="close" data-dismiss="modal">×</button>
　　　　　　　　</div>
　　　
　　　　　　　　<!-- Основная часть модального окна -->
　　　　　　　　<div class="modal-body">
　　　　　　　　　　Содержимое модального окна...
　　　　　　　　</div>
　　　
　　　　　　　　<!-- Нижняя часть модального окна -->
　　　　　　　　<div class="modal-footer">
　　　　　　　　　　<button type="button" class="btn btn-secondary" data-dismiss="modal">Закрыть</button>
　　　　　　　　</div>
　　　
　　　　　　</div>
　　　　</div>
　　</div>
　　
</div>
</body>
</html>
Проверьте, пожалуйста,‹/›

Результат выполнения:

Размеры модального окна

Мы можем добавить .modal-sm Классы используются для создания маленького модального окна, .modal-lg класс используется для создания большого модального окна.

Размерные классы помещаются после класса .modal-dialog элемента <div> :

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　Пример</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>Пример модального окна</h2>
　　<!--　Кнопка: используется для открытия модального окна　-->
　　<button　type="button"　class="btn　btn-primary"　data-toggle="modal"　data-target="#myModal">
　　　　Открывать модальное окно
　　</button>
　　　
　　<!--　模态框　-->
　　<div　class="modal　fade"　id="myModal">
　　　　<div　class="modal-dialog　modal-sm">
　　　　　　<div class="modal-content">
　　　
　　　　　　　　<!-- Заголовок модального окна -->
　　　　　　　　<div class="modal-header">
　　　　　　　　　　<h4 class="modal-title">Заголовок модального окна</h4>
　　　　　　　　　　<button type="button" class="close" data-dismiss="modal">×</button>
　　　　　　　　</div>
　　　
　　　　　　　　<!-- Основная часть модального окна -->
　　　　　　　　<div class="modal-body">
　　　　　　　　　　Содержимое модального окна...
　　　　　　　　</div>
　　　
　　　　　　　　<!-- Нижняя часть модального окна -->
　　　　　　　　<div class="modal-footer">
　　　　　　　　　　<button type="button" class="btn btn-secondary" data-dismiss="modal">Закрыть</button>
　　　　　　　　</div>
　　　
　　　　　　</div>
　　　　</div>
　　</div>
　　
</div>
</body>
</html>
Проверьте, пожалуйста,‹/›

Результат выполнения:

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　Пример</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>Пример модального окна</h2>
　　<!--　Кнопка: используется для открытия модального окна　-->
　　<button　type="button"　class="btn　btn-primary"　data-toggle="modal"　data-target="#myModal">
　　　　Открывать модальное окно
　　</button>
　　　
　　<!--　模态框　-->
　　<div　class="modal　fade"　id="myModal">
　　　　<div　class="modal-dialog　modal-lg">
　　　　　　<div class="modal-content">
　　　
　　　　　　　　<!-- Заголовок модального окна -->
　　　　　　　　<div class="modal-header">
　　　　　　　　　　<h4 class="modal-title">Заголовок модального окна</h4>
　　　　　　　　　　<button type="button" class="close" data-dismiss="modal">×</button>
　　　　　　　　</div>
　　　
　　　　　　　　<!-- Основная часть модального окна -->
　　　　　　　　<div class="modal-body">
　　　　　　　　　　Содержимое модального окна...
　　　　　　　　</div>
　　　
　　　　　　　　<!-- Нижняя часть модального окна -->
　　　　　　　　<div class="modal-footer">
　　　　　　　　　　<button type="button" class="btn btn-secondary" data-dismiss="modal">Закрыть</button>
　　　　　　　　</div>
　　　
　　　　　　</div>
　　　　</div>
　　</div>
　　
</div>
</body>
</html>
Проверьте, пожалуйста,‹/›

Результат выполнения:

Всплывающие окна Bootstrap4Слайдер Bootstrap4