Home > Article > Web Front-end > How to set up pop-up box in bootstrap4
How to set up pop-up box in bootstrap4
- (*-*)浩Original
- 2019-07-12 10:14:481675browse
The pop-up box control is similar to a prompt box. It is displayed after the mouse clicks on an element. The difference from the prompt box is that it can display more content.
How to create a pop-up box(Recommended learning: Bootstrap video tutorial)
By Add data-toggle="popover" to the element to create a popover.
The content of the title attribute is the title of the pop-up box, and the data-content attribute displays the text content of the pop-up box:
<a href="#" data-toggle="popover" title="弹出框标题" data-content="弹出框内容">多次点我</a>
Note: The pop-up box needs to be written in the jQuery initialization code: Then specify Call the popover() method on the element.
data-placement = {left | top | right | bottom | auto} Set the display position of the pop-up box and support multiple settings. For example, when data-placement="auto left", the pop-up window will be displayed. It may be displayed on the left, but it will be displayed on the right if the situation does not allow it.
The following example can use the pop-up box anywhere in the document:
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
Complete code:
By default, the pop-up box will close after clicking the specified element again. You can use the data-trigger="focus" attribute to set it when the mouse clicks outside the element. area to close the popup.
<!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.1.0/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.12.5/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>弹出框实例</h3> <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>
For more technical articles related to Bootstrap, please visit the Bootstrap Tutorial column to learn!
The above is the detailed content of How to set up pop-up box in bootstrap4. For more information, please follow other related articles on the PHP Chinese website!