Bootstrap4 莫代尔
Bootstrap 4 模态
Modal 组件是一个显示在当前页面顶部的对话框/弹出窗口：
模态标题
模态体..
如何创建模态框
以下示例展示了如何创建基本模态：
示例
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open modal
</button>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
Modal body..
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
亲自试一试 »
添加动画
使用.fade打开和关闭模态时添加淡入淡出效果的类：
示例
<!-- Fading modal -->
<div class="modal fade"></div>
<!-- Modal without animation -->
<div class="modal"></div>
亲自试一试 »
模态尺寸
通过添加来更改模态框的大小.modal-sm小模态类，.modal-lg大模态类，或者.modal-xl对于超大模态。
将尺寸类别添加到<div>具有类的元素.modal-dialog:
默认情况下，模态框的大小为 "medium"。
居中模态
将模式在页面内垂直和水平居中，.modal-dialog-centered类：
滚动模态
当模式中有大量内容时，滚动条会添加到页面中。请参阅下面的示例来理解它：
但是，可以通过添加仅在模式内部滚动，而不是页面本身.modal-dialog-scrollable到.modal-dialog:
完整的 Bootstrap 模态参考
有关所有模式选项、方法和事件的完整参考，请访问我们的Bootstrap JS 模态参考。
截取页面反馈部分，让我们更快修复内容！也可以直接跳过填写反馈内容!