boostrap如何使用一个模态框对应多个内容
时间: 2023-07-20 18:32:00 浏览: 53
在Bootstrap中,可以使用JavaScript动态地改变模态框的内容,从而实现一个模态框对应多个内容的效果。
首先,在HTML中创建一个模态框,例如:
```html
<!-- 模态框 -->
<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">
<h4 class="modal-title" id="myModalLabel">模态框标题</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<!-- 模态框的内容 -->
<div class="modal-body">
<!-- 这里是模态框的默认内容,可以根据需要修改 -->
默认内容
</div>
</div>
</div>
</div>
```
然后,在JavaScript中,可以定义一个函数,根据需要改变模态框的内容。例如:
```javascript
function showModalContent(content) {
// 获取模态框的内容区域
var modalBody = document.querySelector('#myModal .modal-body');
// 设置新的内容
modalBody.innerHTML = content;
// 显示模态框
$('#myModal').modal('show');
}
```
在这个函数中,我们首先获取模态框的内容区域,然后根据需要设置新的内容,最后显示模态框。
可以在HTML中添加多个按钮,每个按钮对应不同的内容。例如:
```html
<button onclick="showModalContent('内容1')">按钮1</button>
<button onclick="showModalContent('内容2')">按钮2</button>
<button onclick="showModalContent('内容3')">按钮3</button>
```
当点击不同的按钮时,就会调用不同的函数,从而在模态框中显示不同的内容。
相关推荐
![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)
![](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)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)