Bootstrap - 模态框：初学者指南

你好，未来的网页开发者们！今天，我们将深入Bootstrap模态框的精彩世界。如果你之前从未听说过它们，不用担心——在本教程结束时，你将能够像专业人士一样创建弹出窗口！

什么是模态框？

在我们开始之前，让我们先了解模态框是什么。想象你正在读书，突然一个小便签弹出来，上面有重要信息。这就是模态框在网站上的作用！它是一个对话框或弹出窗口，出现在当前页面上。

模态框组件

让我们从Bootstrap模态框的基本结构开始：

<div class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">模态框标题</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
</div>
<div class="modal-body">
<p>模态框主体文本放在这里。</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">保存更改</button>
</div>
</div>
</div>
</div>

让我们分解一下：

• 最外层的<div>，带有"modal"类，是主要的容器。
• 在里面，我们有"modal-dialog"，它控制模态框的形状和位置。
• "modal-content"包含我们模态框的实际内容。
• 然后我们有三个部分：头部、主体和尾部。

静态背景

有时候，你希望模态框在用户与其交互之前保持显示。这时，静态背景就派上用场了：

<div class="modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1">
<!-- 模态框内容在这里 -->
</div>

通过添加data-bs-backdrop="static"，点击模态框外部不会关闭模态框。data-bs-keyboard="false"防止使用Esc键关闭。

可滚动模态框

内容很多？没问题！让你的模态框可滚动：

<div class="modal-dialog modal-dialog-scrollable">
<!-- 模态框内容在这里 -->
</div>

添加modal-dialog-scrollable类允许模态框主体滚动，同时保持头部和尾部不动。

垂直居中

想让你的模态框正好在屏幕中间？简单！

<div class="modal-dialog modal-dialog-centered">
<!-- 模态框内容在这里 -->
</div>

modal-dialog-centered类会魔法般地将你的模态框垂直居中。

工具提示和弹出框

你甚至可以在模态框中使用工具提示和弹出框。只需记得初始化它们：

var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', function () {
myInput.focus()
})

使用网格

Bootstrap的网格系统在模态框内也适用！这里是一个例子：

<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
</div>
</div>
</div>

这会在你的模态框主体中创建一个两列布局。

动态内容

你可以动态地更改模态框的内容。下面是如何操作的：

var exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', function (event) {
var button = event.relatedTarget
var recipient = button.getAttribute('data-bs-whatever')
var modalTitle = exampleModal.querySelector('.modal-title')
var modalBodyInput = exampleModal.querySelector('.modal-body input')

modalTitle.textContent = '新消息给 ' + recipient
modalBodyInput.value = recipient
})

这个脚本会根据触发模态框的按钮更改模态框的内容。

在模态框之间切换

你甚至可以在不同的模态框之间切换：

<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
<!-- 第一个模态框内容 -->
<button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal">打开第二个模态框</button>
</div>
<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
<!-- 第二个模态框内容 -->
<button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal">回到第一个</button>
</div>

更改动画

想让你的模态框入口更有趣？试试更改动画：

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<!-- 模态框内容 -->
</div>

fade类添加了一个漂亮的淡入效果。你可以使用CSS创建自定义动画！

动态高度

模态框可以根据内容调整高度：

<div class="modal-dialog modal-dialog-scrollable">
<!-- 内容高度不同的模态框 -->
</div>

modal-dialog-scrollable类确保无论内容长度如何，你的模态框看起来都很棒。

无障碍性

始终考虑无障碍性！使用aria-labelledby来引用模态框标题：

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">模态框标题</h5>
<!-- 其余的模态框内容 -->
</div>
</div>
</div>
</div>

可选尺寸

模态框有不同的尺寸：

<!-- 小尺寸模态框 -->
<div class="modal-dialog modal-sm">...</div>

<!-- 大尺寸模态框 -->
<div class="modal-dialog modal-lg">...</div>

<!-- 超大尺寸模态框 -->
<div class="modal-dialog modal-xl">...</div>

全屏模态框

想让你的模态框占据整个屏幕？使用全屏类：

<div class="modal-dialog modal-fullscreen">
<!-- 模态框内容 -->
</div>

你也可以让它在特定屏幕尺寸下全屏：

<div class="modal-dialog modal-fullscreen-sm-down">
<!-- 模态框内容 -->
</div>

这个模态框在小屏幕及以下尺寸下会全屏。

以上就是全部内容！现在你已经具备了使用Bootstrap创建出色模态框的知识。记住，熟能生巧，所以不要害怕尝试这些概念。祝您编程愉快！

方法	描述
.modal(options)	将你的内容激活为模态框。接受一个可选的选项对象。
.modal('toggle')	手动切换模态框。
.modal('show')	手动打开模态框。
.modal('hide')	手动隐藏模态框。
.modal('handleUpdate')	当模态框打开时，如果模态框的高度发生变化（例如出现滚动条），则手动调整模态框的位置。
.modal('dispose')	销毁元素的模态框。

Credits: Image by storyset