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

Основной курс Bootstrap4

Всплывающие окна Bootstrap4

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

Как создать всплывающее окно

Создание всплывающего окна через добавление data-toggle="popover" к элементу Создай всплывающее окно.

Содержимое свойства title является заголовком всплывающего окна, а свойство data-content显示了 текст всплывающего окна:

<a href="#" data-toggle="popover" title="Заголовок всплывающего окна" data-content="Содержание всплывающего окна">Нажми меня несколько раз</a>

Внимание: Всплывающие окна необходимо写入 в инициализационный код jQuery: затем вызвать метод popover() на указанном элементе.

Примеры использования всплывающих окон можно найти в любом месте документа:

<!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>
　　<a href="#" data-toggle="popover" title="Заголовок всплывающего окна" data-content="Содержание всплывающего окна">Нажми меня несколько раз</a>
</div>
<script>
$(document).ready(function(){
　　　　$('[data-toggle="popover"]').popover();　　　
});
</script>
</body>
</html>
Проверьте, что ‹/›

Указать положение всплывающего окна

По умолчанию всплывающее окно отображается справа от элемента.

С помощью свойства data-placement можно определить方向 отображения всплывающего окна: top, bottom, left или right:

<!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>　<br><br><br><br><br><br>
　　<a href="#" title="Заголовок" data-toggle="popover" data-placement="top" data-content="Содержание">Нажми меня</a>
　　<a href="#" title="Заголовок" data-toggle="popover" data-placement="bottom" data-content="Содержание">Нажми меня</a>
　　<a href="#" title="Заголовок" data-toggle="popover" data-placement="left" data-content="Содержание">Нажми меня</a>
　　<a href="#" title="Заголовок" data-toggle="popover" data-placement="right" data-content="Содержание">Нажми меня</a>
</div>
<script>
$(document).ready(function(){
　　　　$('[data-toggle="popover"]').popover();　　　
});
</script>
</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>　<br><br><br><br><br><br>
	<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
	　　Popover в верхней части
	</button>
	<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
	　　Popover на правой стороне
	</button>
	<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus">
	sagittis lacus vel augue laoreet rutrum faucibus.</button>
	　　Popover на нижнем
	</button>
	<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
	　　Popover на левом
	</button>
</div>
<script>
$(document).ready(function(){
　　　　$('[data-toggle="popover"]').popover();　　　
});
</script>
</body>
</html>
Проверьте, что ‹/›

Закрыть弹出窗口

По умолчанию,弹出窗口在再次点击指定元素后会关闭，你可以使用属性 data-trigger="focus" 来设置在点击元素外部区域关闭弹出窗口：

<!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>　<br>
　　<a href="#" title="Отменить弹出窗口" data-toggle="popover" data-trigger="focus" data-content="Нажмите на другое место документа, чтобы закрыть меня">Нажми меня</a>
</div>
<script>
$(document).ready(function(){
　　　　$('[data-toggle="popover"]').popover();　　　
});
</script>
</body>
</html>
Проверьте, что ‹/›

Подсказка:Если вы хотите реализовать эффект отображения и исчезновения при наведении мыши на элемент, вы можете использовать атрибут data-trigger и установить значение "hover":

<!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>　<br>
　　<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="Некоторое содержимое">Переместите мышь на меня</a>
</div>
<script>
$(document).ready(function(){
　　　　$('[data-toggle="popover"]').popover();　　　
});
</script>
</body>
</html>
Проверьте, что ‹/›
Слайдинг Bootstrap4Всплывающие сообщения Bootstrap4