boostrap弹窗怎么使用
时间: 2024-05-16 09:12:58 浏览: 7
Bootstrap 提供了 Modal 组件用于创建弹窗。以下是一个基本的例子:
```html
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
Modal body text goes here.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
```
在这个例子中,一个按钮被用于触发弹窗。按钮包含以下属性:
- `data-toggle="modal"`:告诉 Bootstrap 当按钮被点击时弹出一个模态框。
- `data-target="#myModal"`:告诉 Bootstrap 要弹出哪个模态框。
模态框由一系列包裹在 `modal` 类中的 `div` 元素组成。它们被分为 `modal-dialog`、`modal-content`、`modal-header`、`modal-body` 和 `modal-footer`。
`modal-dialog` 定义模态框的大小和位置。`modal-content` 包含模态框的所有内容,包括 `modal-header`、`modal-body` 和 `modal-footer`。`modal-header` 包含标题和关闭按钮。`modal-body` 包含弹窗的主要内容。`modal-footer` 包含按钮。
你可以使用 JavaScript 来控制模态框的显示和隐藏。例如,可以在 JavaScript 中使用以下代码来显示模态框:
```javascript
$('#myModal').modal('show');
```
如果要在点击按钮时显示模态框,请确保将上述代码放在按钮的单击事件处理程序中。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![js](https://img-home.csdnimg.cn/images/20210720083646.png)