静态模态框示例

下面是一个静态的模态框示例

基础模态框

通过单击下面的按钮触发模态框演示。模态框将从页面顶部滑下并淡入。

长内容的滚动条

当模态框中的内容过长,超出用户设备显示高度,滚动条会独立于页面本身滚动。试试下面的演示

模态框正文的滚动条

你还可以创建另一种可滚动的模态框,添加 .modal-dialog-scrollable.modal-dialog.

垂直居中

添加 .modal-dialog-centered.modal-dialog 使模态框垂直居中.

可选尺寸

模态框有三种可选尺寸,可通过放置在.modal-dialog对话框上的修饰符类获得。这些大小在某些断点处起作用,以避免窄视口上的水平滚动条。

右侧模态框

抽屉类模态加上右滑动画. 添加 .modal-right.modal.

左侧模态框

添加 .modal-left.modal 让它在屏幕左侧滑动.