React Bootstrap 模态框

模态框是用于创建用户通知、灯箱或自定义内容的有吸引力布局的有用 Web 组件。我们可以在模态框组件内放置任何内容。模态框是一个弹出组件，使用任何特定操作触发。

Bootstrap 支持具有三个部分的预定义模态框组件：模态框标题、模态框页脚和模态框主体。每个部分都以其名称的方式进行自定义。标题部分将位于顶部，页脚部分将位于容器的底部。

模态框组件需要 JavaScript 来切换状态；因此，我们不需要编写任何特定代码来切换模态框组件。

模态框显示在所有其他组件的顶部，并在渲染时移除滚动，以便模态框内容可以滚动而不是另一个组件。当我们选择模态框的关闭元素时，它将被卸载。

Bootstrap 不支持嵌套模态框；我们一次只能渲染一个模态框组件。对于嵌套模态框，我们可以使用任何第三方库，例如 @restart/ui。

让我们了解如何使用 React Bootstrap 使用模态框组件。

如何使用 React Bootstrap 创建模态框？

React Bootstrap 支持 <Modal> 组件来创建模态框。我们可以使用 <Modal.Dialog />、<Modal.Header />、<Modal.Body /> 和 <Modal.Footer/> 组件来指定模态框内容。

<Modal /> 组件的导入方式如下

考虑下面的示例

App.js

输出

从上面的输出中，我们创建了一个模态框容器。但是，目前它是一个静态容器，因为我们没有指定它的打开和关闭状态。因此它将显示在网页上。要默认隐藏它，我们需要将其状态设置为默认的 false；然后，我们将在组件单击时切换它。

让我们了解如何显示和隐藏模态框。

如何切换 Bootstrap 模态框？

要切换模态框，我们需要处理模态框状态。我们将使用 useState hook 创建一个状态 [show, setShow] 来显示和隐藏模态框组件。

让我们通过下面的例子来理解它。

输出

上面的代码将渲染一个按钮组件，因为我们已将模态框组件的默认状态设置为 false。

当我们单击“启动模态框”按钮时，它将更新模态框的状态并如下显示

同样，当我们单击关闭按钮时，它将使用 modalClose 函数更新模态框状态并将其关闭。

因此，我们可以使用 React Bootstrap 和 useEffect hook 创建和切换一个模态框组件。

带有静态背景的模态框

默认情况下，Bootstrap 的模态框设计为，如果我们单击模态框组件之外的区域，它将关闭。但是，我们可以通过创建静态背景来覆盖此行为。

要将背景创建为静态，我们可以将 backdrop 属性值作为 static 传递。一旦背景被指定为静态，当单击组件外部时，模态框将不会关闭。

考虑下面的示例

输出

上面的模态框组件将通过单击“启动模型”按钮打开，并且仅通过单击关闭按钮或解散图标来关闭。当单击弹出窗口的外部时，它将关闭。

从模态框窗口中删除动画

默认情况下，如果启动 Bootstrap 模态框，它将以缓动动画打开。我们可以通过传递 animation 属性值为 false 来删除它。

要在没有动画的情况下启动和关闭模态框，请将以下值传递给模态框组件

它将启动和关闭动画，而无需任何动画。

考虑下面的示例

垂直居中对齐的模态框

我们可以通过将 centered 属性传递给模态框组件来垂直居中模态框窗口。我们不需要手动编写任何 CSS 代码来居中模态框弹出窗口。

考虑下面的示例

输出

模态框大小

React Bootstrap 允许我们通过在模态框组件中传递 size 属性来指定模态框大小。我们可以指定 sm 和 lg 作为值来指定模态框的大小。

考虑下面的示例

小模态框

输出

大模态框

输出

全屏模态框

fullscreen 属性允许我们在全屏模式下渲染模态框。在 Bootstrap 5 中，我们可以指定不同的断点来使模态框全屏显示。

考虑下面的示例

输出

上面的模态框将在全屏模式下启动。

因此，我们可以根据需要使用 React Bootstrap Modal。