Bootstrap 模态
在本教程中，您将学习如何使用 Bootstrap 创建模态框。
使用 Bootstrap 创建模态
Modal 基本上是一个对话框或弹出窗口，用于向用户提供重要信息或提示用户在继续之前采取必要的操作。 模态广泛用于警告用户会话超时等情况，或在执行任何关键操作（如保存或删除重要数据）之前收到他们的最终确认。
您可以使用 Bootstrap 模态插件轻松创建非常智能和灵活的对话框。 以下示例概述了创建简单模式的基本结构，该模式具有标题、消息正文和包含用户操作按钮的页脚。
<div class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Confirmation</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<p>Do you want to save changes to this document before closing?</p>
<p class="text-secondary"><small>If you don't save, your changes will be lost.</small></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>— 如果您尝试上面的示例，它将在通过 JavaScript 完全加载 DOM 时自动启动模态窗口。 输出将如下所示：
提示： 始终尝试将模态 HTML 放在文档中的顶级位置，最好在关闭 <body> 标记（即 </body>）之前，以避免其他元素的干扰，否则可能会影响模态的外观 或功能。
查看片段部分以获取一些设计精美的 Bootstrap 模式的示例。
通过数据属性激活模态
您可以通过单击按钮或通过数据属性链接来激活 Bootstrap 模式，而无需编写任何 JavaScript 代码。 看看下面的例子，看看它是如何工作的：
<!-- 按钮 HTML (触发模态) -->
<a href="#myModal" class="btn btn-lg btn-primary" data-toggle="modal">Launch Demo Modal</a>
<!-- 模态 HTML -->
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Confirmation</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<p>Do you want to save changes to this document before closing?</p>
<p class="text-secondary"><small>If you don't save, your changes will be lost.</small></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
上面的示例在单击"启动演示模式"按钮时启动模式窗口。 让我们一一浏览这个模态代码的每一部分，以便更好地理解。
代码说明
要通过数据属性激活 Bootstrap 模式，我们基本上需要两个组件 — 控制器元素，如按钮或链接，以及模态元素本身。
- 文档中每个模式的最外层容器必须具有唯一的 id（在本例中为
id="myModal"，line no-5），以便它可以通过data-target（用于按钮）或href（用于超链接）定位 ) 控制器元素的属性（line no-2）。 - 需要在控制器元素（line no-2）上添加属性
data-toggle="modal"，如按钮或锚点，以及属性data-target="#myModal"或href="#myModal"以针对特定模式进行切换。 .modal-dialog类（line no-6）设置模态框的宽度以及水平和垂直对齐方式。 而.modal-content类设置文本和背景颜色、边框、圆角等样式。
其余部分是不言自明的，例如 .modal-header 元素定义了通常包含模式标题和关闭按钮的模式标题，而 .modal-body 元素包含文本、图像、表单等实际内容，.modal-footer 元素定义通常包含用户操作按钮的页脚。
注意： .modal 元素上的 .fade 类在显示和隐藏模态窗口时添加了淡入淡出和滑动的动画效果。 如果您想要简单地出现而没有任何效果的模式，您可以删除此类。 此外，当模式对于用户的视口或设备而言变得太长时，它们会独立于页面本身滚动。
通过 JavaScript 激活模态
您还可以通过 JavaScript 激活 Bootstrap 模式窗口 — 只需在 JavaScript 代码中使用模态 id 或 class 选择器调用 modal() Bootstrap 方法。
<script>
$(document).ready(function(){
$(".btn").click(function(){
$("#myModal").modal("show");
});
});
</script>更改模态框的大小
Bootstrap 为您提供了进一步放大或缩小模式的选项。 您可以通过分别在 .modal-dialog 上添加额外的 .modal-sm, .modal-lg, 和 .modal-xl 类来创建小型、大型和超大型模式。 这是一个例子：
<!-- 超大模态 -->
<button class="btn btn-primary" data-toggle="modal" data-target="#extraLargeModal">Extra Large modal</button>
<div id="extraLargeModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Extra Large Modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<p>Add the <code>.modal-xl</code> class on <code>.modal-dialog</code> to create this extra large modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">OK</button>
</div>
</div>
</div>
</div>
<!-- 大型模态 -->
<button class="btn btn-primary" data-toggle="modal" data-target="#largeModal">Large modal</button>
<div id="largeModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Large Modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<p>Add the <code>.modal-lg</code> class on <code>.modal-dialog</code> to create this large modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">OK</button>
</div>
</div>
</div>
</div>
<!-- 小模态 -->
<button class="btn btn-primary" data-toggle="modal" data-target="#smallModal">Small modal</button>
<div id="smallModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Small Modal</h5>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<p>Add the <code>.modal-sm</code> class on <code>.modal-dialog</code> to create this small modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">OK</button>
</div>
</div>
</div>
</div>提示：默认模态的最大宽度为 500px，而小、大和超大模态的最大宽度分别为 300px, 800px, 1140px。
根据触发按钮更改模态内容
一个网页上的多个模态通常具有几乎相同的内容，但有细微的差别。
您可以使用 模态事件 创建基于相同模态 HTML 的稍微不同的模态窗口。 下面的示例将向您展示如何根据触发按钮的 data-title 属性值更改模态窗口的标题。
<script>
$(document).ready(function(){
$("#myModal").on("show.bs.modal", function(event){
// 获取触发模态的按钮
var button = $(event.relatedTarget);
// 从自定义 data-* 属性中提取值
var titleData = button.data("title");
$(this).find(".modal-title").text(titleData);
});
});
</script>创建垂直居中的模态
只需将类 .modal-dialog-centered 添加到 .modal-dialog 元素即可垂直居中模式。 如果模态的内容很长，您还可以在 .modal-dialog 上应用 .modal-dialog-scrollable 类以使模态内容可滚动。 这是一个例子：
<!-- 按钮 HTML (触发模态) -->
<a href="#modalCenter" role="button" class="btn btn-primary" data-toggle="modal">Vertically Centered Modal</a>
<!-- 模态 HTML -->
<div id="modalCenter" class="modal fade" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Vertical Alignment Demo</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<p>Lorem ipsum dolor sit amet, consectetur elit...</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">OK, Got it!</button>
</div>
</div>
</div>
</div>在 Modals 中使用网格
您还可以利用 Bootstrap 网格系统 在模式中创建网格布局。 简单地说，使用 .row 类创建行并使用 .col-*, .col-sm-*, .col-md-*, .col-lg-* 和 .col-xl-* 类在 .modal-body 中创建列。 让我们看一个例子：
<div id="myModal" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Send Us a Message</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-6">
<div class="form-group">
<label>First Name</label>
<input type="text" class="form-control">
</div>
</div>
<div class="col-6">
<div class="form-group">
<label>Last Name</label>
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control">
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="form-group">
<label>Comments</label>
<textarea class="form-control"></textarea>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">Send Email</button>
</div>
</div>
</div>
</div>通过 Ajax 在 Modal 中加载内容
您还可以通过 Ajax 在 Bootstrap 模式中加载远程内容。
在下面的示例中，模态正文内的内容将在使用 jQuery load() 方法和 Bootstrap show.bs.modal 事件激活时从远程文件插入。
<!-- jQuery Code (to Load Content via Ajax) -->
<script>
$(document).ready(function(){
$("#myModal").on("show.bs.modal", function(event){
// 将返回的 HTML 放入被选元素中
$(this).find(".modal-body").load("remote.asp");
});
});
</script>
<!-- 按钮 HTML (触发模态) -->
<button type="button" class="btn btn-lg btn-primary" data-toggle="modal" data-target="#myModal">Launch Demo Modal</button>
<!-- 模态 HTML -->
<div id="myModal" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Ajax Loading Demo</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<!-- 内容将从“remote.php”文件加载到这里 -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">OK, Got it!</button>
</div>
</div>
</div>
</div>选项
有一些选项可以传递给 modal() Bootstrap 方法来自定义模式的功能。 选项可以通过数据属性或 JavaScript 传递。
通过数据属性设置模态选项，只需将选项名称附加到data-，如 data-backdrop="static", data-keyboard="false" 等。
| 名称 | 类型 | 说明 | |
|---|---|---|---|
| backdrop | boolean or the string 'static' |
true | 包括一个模态背景（黑色覆盖区域）元素。 或者， 您可以指定 static 用于在点击时不会关闭模式的背景。 |
| keyboard | boolean | true | 按下退出键时关闭模式窗口。 |
| focus | boolean | true | 初始化时将焦点放在模态框上。 |
| show | boolean | true | 在初始化或激活时显示模态。 |
数据属性提供了一种设置模式选项的简单方法，但是 JavaScript 是更可取的方法，因为它可以防止您重复工作。 请参阅以下部分中的 .modal(options) 方法，了解如何使用 JavaScript 设置模式选项。
在下面的示例中，我们将 backdrop 选项设置为 static（line no-5），以防止在单击模态外部（即黑色覆盖区域）时关闭模态 .
<!-- 按钮 HTML (触发模态) -->
<button type="button" class="btn btn-lg btn-primary" data-target="#myModal" data-toggle="modal">Launch Demo Modal</button>
<!-- 模态 HTML -->
<div id="myModal" class="modal fade" data-backdrop="static" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Confirmation</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<p>Do you want to save changes to this document before closing?</p>
<p class="text-secondary"><small>If you don't save, your changes will be lost.</small></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>方法
这些是标准 Bootstrap 程序的模态方法：
.modal(options)
此方法将内容激活为模式。 它还允许您为它们设置选项。
以下示例中的 jQuery 代码将阻止用户单击背景（即模式后面的黑色覆盖区域）时关闭模式。
<script>
$(document).ready(function(){
$(".launch-modal").click(function(){
$("#myModal").modal({
backdrop: 'static'
});
});
});
</script>以下 jQuery 代码将阻止模态框在按下退出键时关闭。
<script>
$(document).ready(function(){
$(".launch-modal").click(function(){
$("#myModal").modal({
keyboard: false
});
});
});
</script>.modal('show')
此方法可用于手动打开模态窗口。
<script>
$(document).ready(function(){
$(".show-modal").click(function(){
$("#myModal").modal('show');
});
});
</script>.modal('hide')
此方法可用于手动隐藏模态窗口。
<script>
$(document).ready(function(){
$(".hide-modal").click(function(){
$("#myModal").modal('hide');
});
});
</script>.modal('toggle')
此方法可用于手动切换模态窗口。
<script>
$(document).ready(function(){
$(".toggle-modal").click(function(){
$("#myModal").modal('toggle');
});
});
</script>.modal('handleUpdate')
此方法会重新调整模态框的位置，以应对由于出现视口滚动条而导致的抖动，以防模态态高度发生变化，使其在打开时高于视口高度。
p>此场景的一个常见示例是通过 JavaScript 显示模态框内的隐藏元素，或在激活后使用 Ajax 加载模态框内的内容。
<script>
$(document).ready(function(){
$(".show-text").click(function(){
$('#myModal').find(".lots-of-text").toggle();
$('#myModal').modal('handleUpdate')
});
});
</script>事件
Bootstrap 的模态类包含一些用于连接模态功能的事件。
| 事件 | 说明 |
|---|---|
| show.bs.modal | 该事件在调用 show 实例方法时立即触发。 |
| shown.bs.modal | 当模态框对用户可见时触发此事件。 它会等到 CSS 转换过程完全完成后才会被触发。 |
| hide.bs.modal | 当调用 hide 实例方法时立即触发此事件。 |
| hidden.bs.modal | 当模式对用户完成隐藏时触发此事件。 它会等到 CSS 转换过程完全完成后才会被触发。 |
| hidePrevented.bs.modal | 当显示模态时触发此事件，其 backdrop 选项设置为 static 并且执行了模态外部的单击，或者 keyboard 选项设置为 false 并且 执行了退出键。 |
当模态窗口的淡出转换完全完成时，以下示例向用户显示一条警告消息。
<script>
$(document).ready(function(){
$("#myModal").on('hidden.bs.modal', function(){
alert("Modal window has been completely closed.");
});
});
</script>如果您尝试通过单击黑暗区域来关闭模式，以下示例会显示一条警告消息。
<script>
$(document).ready(function(){
$("#myModal").on('hidePrevented.bs.modal', function(){
alert("Modal can't be closed by clicking outside, because the backdrop option is set to static.");
});
});
</script>提示：另请参阅Bootstrap FAQ部分，了解更多有关模式的示例，例如设置垂直对齐、更改默认宽度、嵌入 YouTube 视频等。
Advertisements