Bootstrap 模态框

模态框（Modal）是覆盖在页面之上的对话框，用来展示表单、确认操作或通知。它自带遮罩层与关闭按钮，比浏览器原生的 alert/confirm 美观可控得多，是后台管理系统中最常用的插件之一。

基础结构

模态框由三层包裹：modal（半透明遮罩）> modal-dialog（居中对话框）> modal-content（内容，内含 header/body/footer）：

<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">标题</h4>
            </div>
            <div class="modal-body">这里是正文内容。</div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

显示效果：模态框平时隐藏；显示时正文、标题与底部按钮被规整分区排布。

通过按钮触发

触发按钮用 data-toggle="modal" 声明模式，data-target 指向要打开的模态框 id：

<button class="btn btn-primary" data-toggle="modal" data-target="#myModal">
    打开模态框
</button>

显示效果：点击按钮后页面出现半透明遮罩，对话框从顶部滑入居中；点遮罩或"关闭"按钮即消失。

尺寸与动画选项

需要更大或更小的对话框时，在 modal-dialog 上追加 modal-lg 或 modal-sm；外层 fade 类负责淡入动画（上例已使用）。若想禁用点击遮罩关闭，可在 modal 上写 data-backdrop="static"。

编程式 API 与事件

用 jQuery 方法可直接控制显隐，也常配合事件在打开后加载数据：

<script>
$('#myModal').modal('show'); // 显示模态框
$('#myModal').modal('hide'); // 隐藏模态框
$('#myModal').on('shown.bs.modal', function () {
    // 动画播放完成后触发，可在此加载异步内容
});
</script>

说明：常用事件有 show.bs.modal、shown.bs.modal、hide.bs.modal、hidden.bs.modal，分别对应动作开始与完成两个时机。

小结：模态框记住"三层包裹 + data-toggle/data-target 触发"即可上手；需要精确控制时再用 modal('show'/'hide') 方法与 bs.modal 系列事件。