垦荒学园

简体中文

English

简体中文

English

切换主题

Bootstrap 模态框 ​

概述 ​

Bootstrap 模态框是一个对话框/弹出窗口，显示在当前页面的顶部。模态框常用于显示重要信息、确认操作或收集用户输入。

基本模态框 ​

html
<!-- 触发按钮 -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
    打开模态框
</button>

<!-- 模态框 -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">模态框标题</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
            </div>
            <div class="modal-body">
                模态框内容...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">保存更改</button>
            </div>
        </div>
    </div>
</div>

静态背景 ​

html
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel">模态框标题</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
            </div>
            <div class="modal-body">
                点击背景不会关闭此模态框。
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">确定</button>
            </div>
        </div>
    </div>
</div>

滚动长内容 ​

html
<!-- 模态框内滚动 -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">模态框标题</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
            </div>
            <div class="modal-body">
                <p>很长的内容...</p>
                <p>很长的内容...</p>
                <!-- 更多内容 -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">保存更改</button>
            </div>
        </div>
    </div>
</div>

垂直居中 ​

html
<div class="modal fade" id="exampleModalCenter" tabindex="-1" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalCenterTitle">垂直居中模态框</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
            </div>
            <div class="modal-body">
                此模态框垂直居中显示。
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary">保存更改</button>
            </div>
        </div>
    </div>
</div>

尺寸 ​

html
<!-- 小模态框 -->
<div class="modal fade" id="exampleModalSm" tabindex="-1" aria-labelledby="exampleModalSmLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <!-- 内容 -->
        </div>
    </div>
</div>

<!-- 默认模态框 -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- 内容 -->
        </div>
    </div>
</div>

<!-- 大模态框 -->
<div class="modal fade" id="exampleModalLg" tabindex="-1" aria-labelledby="exampleModalLgLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <!-- 内容 -->
        </div>
    </div>
</div>

<!-- 超大模态框 -->
<div class="modal fade" id="exampleModalXl" tabindex="-1" aria-labelledby="exampleModalXlLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <!-- 内容 -->
        </div>
    </div>
</div>

<!-- 全屏模态框 -->
<div class="modal fade" id="exampleModalFullscreen" tabindex="-1" aria-labelledby="exampleModalFullscreenLabel" aria-hidden="true">
    <div class="modal-dialog modal-fullscreen">
        <div class="modal-content">
            <!-- 内容 -->
        </div>
    </div>
</div>

全屏模态框 ​

html
<!-- 始终全屏 -->
<div class="modal-dialog modal-fullscreen">
    ...
</div>

<!-- 在小于 sm 时全屏 -->
<div class="modal-dialog modal-fullscreen-sm-down">
    ...
</div>

<!-- 在小于 md 时全屏 -->
<div class="modal-dialog modal-fullscreen-md-down">
    ...
</div>

<!-- 在小于 lg 时全屏 -->
<div class="modal-dialog modal-fullscreen-lg-down">
    ...
</div>

<!-- 在小于 xl 时全屏 -->
<div class="modal-dialog modal-fullscreen-xl-down">
    ...
</div>

<!-- 在小于 xxl 时全屏 -->
<div class="modal-dialog modal-fullscreen-xxl-down">
    ...
</div>

实际示例 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 模态框示例</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container my-5">
        <h1>Bootstrap 模态框示例</h1>
        
        <!-- 确认对话框 -->
        <h2>确认对话框</h2>
        <button type="button" class="btn btn-danger mb-4" data-bs-toggle="modal" data-bs-target="#confirmModal">
            删除项目
        </button>
        
        <div class="modal fade" id="confirmModal" tabindex="-1" aria-labelledby="confirmModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="confirmModalLabel">确认删除</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
                    </div>
                    <div class="modal-body">
                        <p>您确定要删除此项目吗？此操作无法撤销。</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-danger">确认删除</button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 表单模态框 -->
        <h2>表单模态框</h2>
        <button type="button" class="btn btn-primary mb-4" data-bs-toggle="modal" data-bs-target="#formModal">
            添加用户
        </button>
        
        <div class="modal fade" id="formModal" tabindex="-1" aria-labelledby="formModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="formModalLabel">添加新用户</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
                    </div>
                    <div class="modal-body">
                        <form>
                            <div class="mb-3">
                                <label for="userName" class="form-label">用户名</label>
                                <input type="text" class="form-control" id="userName" required>
                            </div>
                            <div class="mb-3">
                                <label for="userEmail" class="form-label">邮箱</label>
                                <input type="email" class="form-control" id="userEmail" required>
                            </div>
                            <div class="mb-3">
                                <label for="userRole" class="form-label">角色</label>
                                <select class="form-select" id="userRole">
                                    <option selected>选择角色...</option>
                                    <option value="1">管理员</option>
                                    <option value="2">编辑</option>
                                    <option value="3">查看者</option>
                                </select>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary">添加用户</button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 信息模态框 -->
        <h2>信息模态框</h2>
        <button type="button" class="btn btn-info mb-4" data-bs-toggle="modal" data-bs-target="#infoModal">
            查看详情
        </button>
        
        <div class="modal fade" id="infoModal" tabindex="-1" aria-labelledby="infoModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="infoModalLabel">产品详情</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-6">
                                <img src="https://via.placeholder.com/400x300" class="img-fluid rounded" alt="产品图片">
                            </div>
                            <div class="col-md-6">
                                <h4>产品名称</h4>
                                <p class="text-muted">产品编号：#12345</p>
                                <p>这是产品的详细描述信息。包含产品的特点、规格和使用说明。</p>
                                <h5 class="text-primary">¥299.00</h5>
                                <ul>
                                    <li>特点 1</li>
                                    <li>特点 2</li>
                                    <li>特点 3</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary">加入购物车</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

JavaScript 方法 ​

javascript
// 创建模态框实例
const myModal = new bootstrap.Modal(document.getElementById('myModal'), options)

// 显示模态框
myModal.show()

// 隐藏模态框
myModal.hide()

// 切换模态框
myModal.toggle()

// 销毁模态框
myModal.dispose()

// 手动调整模态框位置
myModal.handleUpdate()

事件 ​

javascript
const myModalEl = document.getElementById('myModal')
myModalEl.addEventListener('show.bs.modal', event => {
    // 模态框即将显示
})

myModalEl.addEventListener('shown.bs.modal', event => {
    // 模态框已显示
})

myModalEl.addEventListener('hide.bs.modal', event => {
    // 模态框即将隐藏
})

myModalEl.addEventListener('hidden.bs.modal', event => {
    // 模态框已隐藏
})

myModalEl.addEventListener('hidePrevented.bs.modal', event => {
    // 模态框隐藏被阻止
})

最佳实践 ​

1. 可访问性 ​

html
<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="myModalLabel">模态框标题</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
            </div>
            <!-- 内容 -->
        </div>
    </div>
</div>

2. 焦点管理 ​

javascript
const myModal = document.getElementById('myModal')
myModal.addEventListener('shown.bs.modal', () => {
    document.getElementById('myInput').focus()
})

下一步 ​

下一章：Bootstrap 提示框 →