Bootstrap - 模态框演示

什么是模态框？

你好，有抱负的网页开发者们！今天，我们将深入Bootstrap模态框的精彩世界。作为你友好的计算机老师邻居，我将在这一旅程中一步步引导你。所以，拿起你最喜欢的饮料，舒服地坐好，让我们一起开始这次模态框的冒险吧！

Bootstrap - Modals Demo

定义与用途

在网页开发术语中，模态框就像是在当前页面上弹出的窗口。这是一种在不离开当前视图的情况下显示内容的绝佳方式。想象一下，你正在阅读一篇文章，突然你想了解更多关于特定术语的信息。而不是打开新页面，模态框可以弹出并提供额外细节，让你能够快速返回阅读。酷炫吧？

Bootstrap，我们网页设计中的可靠伙伴，提供了一个既易于使用又高度可定制的模态框组件。让我们来探索如何实现它！

基本模态框结构

HTML 结构

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

<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">模态框标题</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="关闭">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p>模态框正文内容放在这里。</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary">保存更改</button>
</div>
</div>
</div>
</div>

让我们分解一下：

最外层的 <div>，带有类 modal，是我们整个模态框的容器。
其内，我们有 modal-dialog，它使模态内容居中。
modal-content <div> 持有我们模态框的实际内容。
然后我们有三个主要部分：

modal-header：包含标题和关闭按钮。
modal-body：主要内容放在这里。
modal-footer：通常包含操作按钮。

触发模态框

现在，我们如何让这个模态框出现？我们需要一个触发器！通常这是一个按钮：

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
启动演示模态框
</button>

注意 data-toggle="modal" 和 data-target="#exampleModal"。这些告诉Bootstrap要做什么（切换模态框）以及显示哪个模态框（ID为 "exampleModal" 的那个）。

别忘了给你的模态框添加一个 id，使其与 data-target 匹配：

<div class="modal" id="exampleModal" tabindex="-1" role="dialog">
<!-- 模态框内容 -->
</div>

定制你的模态框

大小

Bootstrap 允许你轻松改变模态框的大小。只需在 modal-dialog <div> 中添加一个类：

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

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

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

居中模态框

想要你的模态框完美居中？添加 modal-dialog-centered 类：

<div class="modal-dialog modal-dialog-centered">...</div>

可滚动模态框

如果你的模态框内容很长，你可以使其可滚动：

<div class="modal-dialog modal-dialog-scrollable">...</div>

使用JavaScript添加功能

虽然Bootstrap的数据属性对于基本功能来说很棒，但有时你需要更多的控制。这时JavaScript就派上用场了！

// 显示模态框
$('#exampleModal').modal('show');

// 隐藏模态框
$('#exampleModal').modal('hide');

// 切换模态框
$('#exampleModal').modal('toggle');

你也可以监听模态框事件：

$('#exampleModal').on('shown.bs.modal', function () {
console.log('模态框现在可见！');
})

实际示例：一个“删除确认”模态框

让我们用一个实际例子来把所有东西放在一起。想象一下我们正在构建一个待办事项列表应用，我们想在删除任务前进行确认：

<!-- 删除按钮 -->
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#deleteModal">
删除任务
</button>

<!-- 模态框 -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="deleteModalLabel">确认删除</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="关闭">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
你确定要删除这个任务吗？这个操作无法撤销。
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-danger" id="confirmDelete">删除</button>
</div>
</div>
</div>
</div>

下面是处理删除的JavaScript代码：

$('#confirmDelete').on('click', function() {
// 删除任务的代码放在这里
console.log('任务已删除！');
$('#deleteModal').modal('hide');
});

结论

恭喜你！你刚刚学会了Bootstrap模态框的来龙去脉。从基本结构到定制，甚至一个实际例子，你现在装备齐全，可以在你的网页项目中添加这个强大的功能。

记住，熟能生巧。尝试创建不同类型的模态框，尝试不同的尺寸和定位，最重要的是，享受其中的乐趣！谁知道呢，你可能会成为你编程朋友中的“模态框大师”。

快乐编码，愿你的模态框总是在恰当的时刻弹出！

Credits: Image by storyset