用bootstrap做一个弹窗视频 有关闭按钮
时间: 2024-01-29 22:04:50 浏览: 69
一个漂亮的前端弹窗,包含关闭按钮,样式清晰好看,可关闭弹窗
3星 · 编辑精心推荐
好的,我可以帮你解答这个问题。
首先,你需要准备一个视频文件,并将其嵌入到弹窗中。你可以使用 Bootstrap 的 Modal 组件来创建弹窗,并在其中嵌入视频。
以下是一个简单的示例代码:
```html
<!-- 弹窗触发按钮 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#videoModal">
播放视频
</button>
<!-- 弹窗 -->
<div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="videoModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="videoModalLabel">视频标题</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<video src="your-video-file.mp4" controls></video>
</div>
</div>
</div>
</div>
```
在上面的代码中,我们使用了 Bootstrap 的 Modal 组件来创建弹窗,并在其中嵌入了一个视频标签。我们使用了 `controls` 属性来添加视频控制条。
同时,我们还添加了一个关闭按钮,当用户点击该按钮时,弹窗会关闭。这里使用了 `data-dismiss="modal"` 属性来关闭弹窗。
希望这个简单的示例能够帮助到你。如果你有任何问题或疑问,请随时问我!
阅读全文