Bootstrap4 弹出框

Bootstrap4的弹出框（Modal）组件提供了一种方便、干净的方式来在页面中显示消息、表单、或任何其他可视化的内容，并允许用户与之交互。在这篇文章中，我们将详细说明如何创建和使用Bootstrap4模态框。

模态框的基本结构

首先，我们需要了解Bootstrap4模态框的基本结构。下面是一个最简单的模态框结构：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        Modal body goes here...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

这段代码主要由以下几部分组成：

一个起始于div，class为“modal fade”的元素，表示这是一个模态框。其中，“fade”类为可选值，可以提供一个淡入淡出的动画效果。
一个id属性，用于在Javascript代码中引用模态框。
一个tabindex属性，用于指示模态框的焦点。通常设置为-1，表示模态框不应获得焦点，也不应阻止后面的页面获得焦点。
一个role属性，用于指示模态框的角色。通常设置为“dialog”。
一个aria-labelledby属性，用于标记模态框的标题。该属性应指向包含标题文本的元素的ID。

在模态框起始元素中，还有三个包含在类为“modal-dialog”的元素之中的子元素“modal-header”，“modal-body”和“modal-footer”，该部分定义了模态框的主体内容。

modal-header定义了模态框的标题和一个“关闭”按钮。
modal-body定义了模态框的主体内容。
modal-footer定义了模态框的底部。通常包含一个或多个按钮，用于关闭、保存或取消模态框。

模态框的触发方式

出现模态框的方式分别是点击按钮、链接和其他元素，具体方法如下。

按钮触发弹出框

用法如下所示：

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

其中，“data-toggle”属性用于指示按下按钮时是否需要弹出模态框；“data-target”指示哪个模态框应该弹出。

链接触发弹出框

用法如下所示：

<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

其他元素触发模态框

用法如下所示：

<div class="card" style="width: 18rem;" data-toggle="modal" data-target="#myModal">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

在此示例中，一个card元素被用作触发模态框的元素。通过为div元素添加"data-toggle"和"data-target"属性来实现，当用户单击该元素时，模态框将弹出并显示要显示的内容。

模态框的选项

Bootstrap4模态框组件有很多选项，可以通过设置data-XX值或JavaScript来改变其外观和功能。下面是一些最常用的选项：

选项	描述
data-backdrop	默认情况下，通过单击模态框外部区域来关闭模态框。可以将“data-backdrop”设置为“static”，使其不会关闭。或者可以将其设置为“false”禁用背景元素点击关闭。
data-keyboard	默认情况下，按下Escape键将关闭模态框。可以将“data-keyboard”设置为“false”，禁用此功能。
data-focus	默认情况下，弹出模态框时，焦点将移动到模态框中的第一个可交互元素。可以将“data-focus”设置为“false”，禁用此功能。
data-show	默认情况下，点击触发模态框的元素将弹出模态框。可以将“data-show”设置为“false”，禁用此功能。
data-remote	默认情况下，模态框中的内容通过HTML呈现。可以将“data-remote”设置为通过AJAX从服务器获取内容的url。
data-title	修改模态框的标题。设置方法是在模态框的标题元素中添加一个"data-title"属性。
data-btnok	修改模态框中的确认按钮的文本。设置方法是在模态框的确认按钮中添加一个"data-btnok"属性。
data-btncancel	修改模态框中的取消按钮的文本。设置方法是在模态框的取消按钮中添加一个"data-btncancel"属性。
show	调用模态框的show方法可以弹出模态框。例如：`$("#myModal").modal("show");`
hide	调用模态框的hide方法可以关闭模态框。例如：`$("#myModal").modal("hide");`

结论

本文中，我们介绍了Bootstrap4模态框组件的基本结构、触发模态框的方式以及如何使用一些常用选项来定制模态框的行为和外观。现在，你已经知道如何使用Bootstrap4模态框组件来创建漂亮、交互式的模态框了！

Bootstrap4 小工具 Bootstrap4 徽章（Badges）