Bootstrap5 模态

模态框

Modal 组件是一个显示在当前页面顶部的对话框/弹出窗口：

如何创建模态框

以下示例展示了如何创建基本模态：

示例

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
Open modal
</button>


<div class="modal" id="myModal">
<div class="modal-dialog">
    <div class="modal-content">

      
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      
      <div class="modal-body">
        Modal body..
      </div>

      
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
      </div>

    </div>
</div>
</div>

亲自试一试 »

添加动画

使用.fade打开和关闭模态时添加淡入淡出效果的类：

示例

<div class="modal fade"></div>


<div class="modal"></div>

亲自试一试 »

模态尺寸

通过添加来更改模态框的大小.modal-sm小模态框的类（最大宽度 300px），.modal-lg大模态的类（最大宽度 800px），或者.modal-xl对于超大模态（最大宽度 1140px）。默认最大宽度为 500px。

将尺寸类别添加到<div>具有类的元素.modal-dialog:

默认情况下，模态框的大小为"medium"（最大宽度为 500 像素）。

全屏模态框

如果您希望模式跨越页面的整个宽度和高度，请使用.modal-fullscreen类：

示例

亲自试一试 »

响应式全屏模态

您还可以控制模式何时应处于全屏状态，方法是.modal-fullscreen-*-*课程：

Class	Description	Example
`.modal-fullscreen-sm-down`	Fullscreen below 576px	尝试一下
`.modal-fullscreen-md-down`	Fullscreen below 768px	尝试一下
`.modal-fullscreen-lg-down`	Fullscreen below 992px	尝试一下
`.modal-fullscreen-xl-down`	Fullscreen below 1200px	尝试一下
`.modal-fullscreen-xxl-down`	Fullscreen below 1400px	尝试一下

居中模态

将模式在页面内垂直和水平居中，.modal-dialog-centered类：

示例

亲自试一试 »

滚动模态

当模式中有大量内容时，滚动条会添加到页面中。请参阅下面的示例来理解它：

示例

亲自试一试 »

但是，可以通过添加仅在模式内部滚动，而不是页面本身.modal-dialog-scrollable到.modal-dialog:

示例

亲自试一试 »

Bootstrap5 模态

模态框

模态标题

如何创建模态框

示例

添加动画

示例

模态尺寸

小莫代尔

大莫代尔

超大莫代尔

全屏模态框

示例

响应式全屏模态

居中模态

示例

滚动模态

示例

示例