极客教程如何使用div作为Twitter Popover的内容
程序：弹出窗口的DOM结构。
<!-- DOM structure template for the popover
id's and attributes are usually specified
automatically -->
<div class="popover fade show"
role="tooltip"
id="popover_XYZ"
style="position: absolute;
will-change: transform;
top: 0px; left: 0px;
transform: translate3d(6px, 360px, 0px);"
x-placement="bottom">
<div class="arrow" style="left: 80px;"></div>
<h3 class="popover-header">Popover Header here</h3>
<div class="popover-body">Popover Content here</div>
</div>
输出:
弹出窗口内的Div：默认情况下，我们不能在弹出窗口内定义HTML。为此，我们将设置html选项为‘true’，以便在初始阶段初始化时允许弹出窗口内有HTML内容。将HTML div内容存储在一个变量中，将该变量初始化为popover的一个选项。
- 语法:
$([selector]).popover({ html:true; title:[header]; content:[Content] });
- 示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<!-- CDN's Required -->
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js">
</script>
<script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js">
</script>
</head>
<body>
<br>
<br>
<center>
<div class="container">
<!-- Data for popover header -->
<div class="pickHead">
<h3 class="text text-success">
GeeksforGeeks
</h3>
</div>
<!-- Data for popover content -->
<div class="pickData">
<div class="text">
A computer science portal for Geeks
</div>
</div>
<br>
<br>
<!-- Popover Button -->
<button class="btn btn-success"
data-toggle="popover">
Twitter's popover
</button>
</div>
</center>
<script>
// Pick the div data as required
var head = "" + ('.pickHead').html();
var data = "" +('.pickData').html();
// Append the html data as the options
(document).ready(function() {
('[data-toggle="popover"]').popover({
html: true,
title: head,
content: data
});
});
</script>
</body>
</html>
- 输出:
