模态框 Modal

模态框是位于页面之上的对话框,用于灯箱、用户确认与自定义内容;支持垂直居中、长内容滚动、三种可选尺寸以及点击遮罩不关闭的静态背景。

基础模态框

按钮加 data-bs-toggle="modal" 与 data-bs-target 即可弹出;点右上角 ×、点「关闭」按钮或点遮罩都能关闭。

HTML 示例

垂直居中

给 modal-dialog 加 modal-dialog-centered,模态框即在视口中水平且垂直居中。

HTML 示例

可滚动长内容

内容过长时,给 modal-dialog 加 modal-dialog-scrollable,对话框高度受限、内部内容区独立滚动。

HTML 示例

可选尺寸

modal-sm(最大宽 300px)、modal-lg(800px)、modal-xl(1140px)放在 modal-dialog 上,三档尺寸按需选择。

HTML 示例

静态背景

在模态框上设置 data-bs-backdrop="static" 与 data-bs-keyboard="false":点击遮罩不关闭,按 Esc 也不关闭,只能点按钮关闭。

HTML 示例