利用bootstrap实现悬浮窗口的效果
时间: 2023-12-16 10:03:05 浏览: 35
要实现悬浮窗口的效果,可以使用 Bootstrap 提供的 Modal 组件。以下是实现步骤:
1. 在 HTML 文件中引入 Bootstrap 的 CSS 和 JS 文件。
```html
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.0/css/bootstrap.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.0/js/bootstrap.bundle.min.js"></script>
```
2. 在 HTML 中添加一个按钮,点击按钮可以触发模态框。
```html
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
打开悬浮窗口
</button>
```
3. 添加一个模态框,该模态框会在点击按钮时弹出。
```html
<div class="modal fade" id="myModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">悬浮窗口</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
这是一个悬浮窗口。
</div>
</div>
</div>
</div>
```
4. 在 CSS 文件中添加以下样式,使模态框变成悬浮窗口的样式。
```css
.modal-content {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1050;
}
```
5. 刷新页面,点击按钮即可看到悬浮窗口弹出。
完整代码如下:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>悬浮窗口</title>
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.0/css/bootstrap.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.0/js/bootstrap.bundle.min.js"></script>
<style>
.modal-content {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1050;
}
</style>
</head>
<body>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
打开悬浮窗口
</button>
<div class="modal fade" id="myModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">悬浮窗口</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
这是一个悬浮窗口。
</div>
</div>
</div>
</div>
</body>
</html>
```