Модальное окно в Bootstrap 4
1 - Bootstrap Modal
Modal это Dialog (Диалог) или Popup (всплывающее окно), оно отображается по верх всего содержимого страницы. Цель у модальнго окна (Modal) это оповещение или ожидание от пользователя ввода информации.Несмотря на то, что jаvascript поддерживает некоторые диалоги (dialog), как Confirm, Alert, Open File, Save file,.. но точно эти dialog не могут быть кастомизированы, соответственно Вы ожидаете чего то большего.Посмотрим на простой пример модального окна Bootstrap 4:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Modal Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open modal
</button>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
Modal body..
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>
Ниже показана структура у Modal. Элемент div.modal-content это место, в котором вы заинтересованы, включает 3 зоны Header, Body & Footer, и вы можете кастомизировать все три зоны.
<div class="modal" id="myModal"
data-backdrop="static"
data-keyboard="false"
tabindex="-1"
aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Title</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
Modal body..
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Атрибут (Attribute) | Описание |
data-backdrop | Данный атрибут имеет 2 значения это true или static. По умолчанию это true, значит тот пользователь может нажать на фон (background), чтобы закрыть Modal. |
data-keyboard | Данный атрибут имеет 2 значения это true или false. По умолчанию это false, если true пользователь может закрыть Modal нажав на ESC. |
aria-labelledby | Атрибут у HTML5 |
aria-hidden | Атрибут у HTML5 |
Класс .fade позволяет вам создавать эффекты при скрытии или отображении модального окна (Modal).
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal Title</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
Modal body..
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Например, создадим Modal, который не содержит кнопку "X" (в правом углу у Modal).
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal Title</h4>
</div>
<div class="modal-body">
Modal body..
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
2 - Modal & jQuery
Вы можете использовать JQuery для взаимодействия с модальным окном , например скрыть или отобразить Modal.$('#myModal').modal('toggle');
$('#myModal').modal('show');
$('#myModal').modal('hide');
Более подробный пример:
$('#myModal').modal(options);
// Example:
var options = {
'backdrop' : 'static',
'keyboard' : true,
'show' : true,
'focus' : false
}
Опция | Описание |
backdrop | Данная опция имеет два значения это true или static. По умолчанию true, значит пользователь может нажать на фон (background), чтобы закрыть Modal. |
keyboard | Данная опция имеет два значения это true или false. По умолчанию false, если true пользователь может закрыть Modal нажав на ESC. |
show | Данная опция имеет два значения это true или false. Используется для скрытия или отображения Modal. |
focus | Данная опция имеет два значения это true или false, mặc định là false. Если true, Modal будет focus (сфокусирован) при создании. |
3 - События у Modal
Некоторые события запускаются (fired) когда Modal открывается или закрывается. И вы можете использовать данные события для выполнения чего-либо. Использовать метод "on" у jQuery чтобы связать событие с обработчиком.Событие | Описание |
show.bs.modal | Данное событие запускается (fired) сразу перед отображением Modal. |
shown.bs.modal | Данное событие запускается сразу после отображения Modal. |
hide.bs.modal | Данное событие запускается сразу перед скрытием Modal |
hidden.bs.modal | Данное событие запускается сразу после скрытия Modal. |
Вы можете обработать одно из выше перечисленных событий как показано ниже:
$('#myModal').on('shown.bs.modal', function (e) {
alert('Modal is successfully shown!');
});
Ссылка для скачивания доступна только авторизованным пользователям, пожалуйста пройдите регистрацию.
Это займёт не более минуты. Не волнуйтесь, мы не спамим!
У данной публикации нет комментариев.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Облако тегов
Bootstrap bootstrap CSS CSS3 DLE dle fruit farm html html шаблон html5 HTML5 Payeer PNG PSD wap Wordpress Скрипт удвоителя адаптивный адаптивный шаблон бонусник дизайн игровой хостинг иконки лендинг меню модуль панель портфолио сайт скрипт скрипт фермы текстура удвоитель удвоитель Payeer ферма фон фруктовая ферма хак шаблон экономическая игра
Как обозначается тег в HTML