模态框(Modal)是一个覆盖在父页面上的子窗口，用于显示内容、收集用户输入或确认操作。Bootstrap 4的模态框组件提供了响应式设计、动画效果和丰富的自定义选项。
创建一个基本的模态框，包含标题、内容和操作按钮。
<!-- 触发按钮 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#basicModal">
打开基础模态框
</button>
<!-- 模态框 -->
<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="basicModalLabel">模态框标题</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="关闭">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
这是模态框的内容区域。
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">保存更改</button>
</div>
</div>
</div>
</div>
Bootstrap 4 提供了多种尺寸的模态框，包括小、默认、大和全屏尺寸。
<!-- 小模态框 -->
<div class="modal fade" id="smallModal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-sm" role="document">
<!-- 模态框内容 -->
</div>
</div>
<!-- 大模态框 -->
<div class="modal fade" id="largeModal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<!-- 模态框内容 -->
</div>
</div>
<!-- 全屏模态框 -->
<div class="modal fade" id="fullscreenModal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-fullscreen" role="document">
<!-- 模态框内容 -->
</div>
</div>
.modal-fullscreen .modal-dialog {
max-width: 100%;
margin: 0;
}
.modal-fullscreen .modal-content {
height: 100vh;
border: 0;
border-radius: 0;
}
在模态框中嵌入表单，用于收集用户输入。
<div class="modal fade" id="formModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">用户注册</h5>
<button type="button" class="close" data-dismiss="modal">
<span>×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="username">用户名</label>
<input type="text" class="form-control" id="username" placeholder="请输入用户名">
</div>
<div class="form-group">
<label for="email">邮箱地址</label>
<input type="email" class="form-control" id="email" placeholder="请输入邮箱">
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" class="form-control" id="password" placeholder="请输入密码">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary">注册</button>
</div>
</div>
</div>
</div>
将模态框在屏幕中垂直居中显示。
<div class="modal fade modal-centered" id="centeredModal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-dialog-centered" role="document">
<!-- 模态框内容 -->
</div>
</div>
.modal-centered .modal-dialog {
display: flex;
align-items: center;
min-height: calc(100% - 1rem);
}
当模态框内容过长时，启用滚动功能。
<div class="modal fade modal-scrollable" id="scrollableModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">长内容模态框</h5>
<button type="button" class="close" data-dismiss="modal">
<span>×</span>
</button>
</div>
<div class="modal-body">
<!-- 长内容 -->
</div>
</div>
</div>
</div>
.modal-scrollable .modal-body {
max-height: 70vh;
overflow-y: auto;
}
创建静态背景模态框，点击模态框外部不会关闭模态框。
<div class="modal fade" id="staticModal" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">静态背景模态框</h5>
<button type="button" class="close" data-dismiss="modal">
<span>×</span>
</button>
</div>
<div class="modal-body">
这个模态框有静态背景，点击模态框外部或按ESC键不会关闭它。
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">确定</button>
</div>
</div>
</div>
</div>
通过自定义CSS创建独特的模态框样式。
<div class="modal fade modal-custom" id="customModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"><i class="fas fa-star"></i> 自定义标题</h5>
<button type="button" class="close" data-dismiss="modal">
<span>×</span>
</button>
</div>
<div class="modal-body">
这是自定义样式的模态框。
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-secondary" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary">确认</button>
</div>
</div>
</div>
</div>
.modal-custom .modal-header {
background-color: #6f42c1;
color: white;
}
.modal-custom .modal-footer {
background-color: #f8f9fa;
}
Bootstrap 4模态框组件提供了丰富的JavaScript API，允许您通过代码控制模态框行为。
// 获取模态框实例
var myModal = $('#apiModal');
// 显示模态框
$('#showModal').click(function() {
myModal.modal('show');
});
// 隐藏模态框
$('#hideModal').click(function() {
myModal.modal('hide');
});
// 切换模态框
$('#toggleModal').click(function() {
myModal.modal('toggle');
});
// 事件监听
myModal.on('show.bs.modal', function() {
console.log('模态框即将显示');
});
myModal.on('shown.bs.modal', function() {
console.log('模态框已完全显示');
});
myModal.on('hide.bs.modal', function() {
console.log('模态框即将隐藏');
});
myModal.on('hidden.bs.modal', function() {
console.log('模态框已完全隐藏');
});
使用模态框组件时，遵循以下最佳实践可以提升用户体验和可访问性。