bootstrap4模态框的使用

最新推荐文章于 2024-09-11 06:09:11 发布

五当家

最新推荐文章于 2024-09-11 06:09:11 发布

阅读量750

点赞数

本文链接：https://blog.csdn.net/CHENWEI199908/article/details/119487960

版权

这篇博客介绍了如何使用Bootstrap的模态框组件，包括基本的创建触发和高级的事件绑定。通过`data-toggle`和`data-target`属性实现按钮触发模态框显示，模态框内容包含确认信息和关闭按钮。此外，展示了如何在模态框隐藏和显示时绑定自定义事件，例如在模态框关闭时打印'123'。

摘要由CSDN通过智能技术生成

基本使用：

创建触发标签：

data-toggle=“modal” （模态框）
data-target="#exampleModal"（对应着模态框的id）

<button type="button" data-toggle="modal" data-target="#exampleModal" class="btn mt-5 save">保存</button>

模态框：

id="exampleModal"需要和上方id保持一致

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
		<div class="modal-dialog modal-dialog-centered modal-sm">
			<div class="modal-content">
				<div class="modal-body">
					<div class="container-fluid">
						<div class="row">
							<div class="col-12 text-center">
								<h4 class="modal_text">文件上传成功</h4>

							</div>
						</div>
					</div>
				</div>
				<div class="modal-footer d-flex justify-content-center border-0">
					<button type="button" class="btn btn-primary d-inline-block" data-dismiss="modal">确定</button>
				</div>
			</div>
		</div>
	</div>

此时点击按钮就会弹出模态框。

高级使用：

因为模态框在启动或者关闭时会有短时间的过度动画，所以可以进行你希望的事件绑定
// 在模态框显示后，触发关闭时打印123
$("#exampleModal").on(‘hide.bs.modal’, function() {
console.log(‘123’);
})
// 在模态框显示后，触发关闭时模态框消失时 打印123
$("#exampleModal").on(‘hidden.bs.modal’, function() {
console.log(‘123’);
})
// 在点击模态框按钮后，触发显示时 打印123
$("#exampleModal").on(‘show.bs.modal’, function() {
console.log(‘123’);
})
// 在点击模态框按钮后，触发显示且模态框已经完全显示 打印123
$("#exampleModal").on(‘shown.bs.modal’, function() {
console.log(‘123’);
})