什么是 bootstrap ngb modal window？Bootstrap 是一个流行的开源前端框架，用于构建响应

Bootstrap 是一个流行的开源前端框架，用于构建响应式和移动优先的网站和应用程序。它提供了一套丰富的CSS样式和JavaScript组件，以简化Web开发过程。其中之一是 Bootstrap Modal，它是一个用于创建模态框（Modal）窗口的组件。而 "ngb" 是指的 Angular Bootstrap，是将 Bootstrap 组件集成到 Angular 应用程序中的一种方式。

Bootstrap Modal 是一个可定制的弹出窗口组件，可以用于在页面上展示临时内容、对话框、提示信息、登录框等等。它提供了一个简单但功能强大的界面，让开发人员能够轻松创建各种类型的模态窗口。

Bootstrap Modal 组件具有以下特点和功能：

弹出窗口效果：Modal 组件以叠加的方式在当前页面上展示，将焦点放在模态窗口上，而模态窗口之外的页面元素被遮罩层所覆盖，使用户专注于模态窗口的内容。
内容自定义：Modal 组件允许开发人员在弹出窗口中自定义内容。可以在模态窗口中添加文本、图像、表单、按钮等任何HTML元素，以满足特定的需求。
动画效果：Bootstrap Modal 提供了一系列的过渡效果和动画，可以通过配置选项来定义弹出和关闭模态窗口时的动画效果，以增强用户体验。
模态窗口尺寸：Modal 组件支持不同的尺寸选项，如小型、中型和大型，以适应不同内容的展示需求。
事件回调：Modal 组件提供了各种事件回调函数，可以在特定事件发生时执行自定义的操作。例如，在模态窗口打开、关闭、隐藏等事件发生时，可以执行相应的回调函数。
键盘操作支持：Modal 组件允许使用键盘操作来与模态窗口进行交互。通过按下 Esc 键，可以关闭模态窗口，提供了更好的用户体验。

将 Bootstrap Modal 与 Angular 框架集成时，可以使用 Angular Bootstrap（ng-bootstrap）库。ng-bootstrap 是官方提供的 Angular 版本的 Bootstrap 组件库，它提供了 Angular 指令和服务，使开发人员可以更轻松地在 Angular 应用程序中使用 Bootstrap 组件，包括 Modal 组件。

使用 ng-bootstrap 的 Modal 组件，您可以通过几个简单的步骤在 Angular 应用程序中创建和使用模态窗口：

安装 ng-bootstrap：通过 npm 或 yarn 安装 ng-bootstrap 包。
导入所需的模块：在 Angular 应用程序的模

块文件中导入所需的 ng-bootstrap 模块。

使用 Modal 组件：在组件模板中使用 ng-bootstrap 提供的 Modal 组件，通过配置选项自定义模态窗口的外观和行为。
触发 Modal：通过触发某个事件（如按钮点击）或调用相应的方法，打开或关闭 Modal 窗口。

以下是一个示例代码，演示了如何使用 Bootstrap ngb Modal 在 Angular 应用程序中创建一个简单的模态窗口：

                  <!-- 模态窗口模板 -->
                  <ng-template #content let-modal>
                    <div class=&quot;modal-header&quot;>
                        <h4 class=&quot;modal-title&quot;>模态窗口标题</h4>
                            <button type=&quot;button&quot; class=&quot;close&quot; aria-label=&quot;关闭&quot; (click)=&quot;modal.dismiss('关闭')&quot;>
                                  <span aria-hidden=&quot;true&quot;>&amp;times;</span>
                                      </button>
                                        </div>
                                          <div class=&quot;modal-body&quot;>
                                              <p>模态窗口内容</p>
                                                </div>
                                                  <div class=&quot;modal-footer&quot;>
                                                      <button type=&quot;button&quot; class=&quot;btn btn-secondary&quot; (click)=&quot;modal.close('保存')&quot;>保存</button>
                                                          <button type=&quot;button&quot; class=&quot;btn btn-outline-secondary&quot; (click)=&quot;modal.dismiss('取消')&quot;>取消</button>
                                                            </div>
                                                            </ng-template>" aria-label="复制" data-bs-original-title="复制"></button>
</div>
      </div><pre class="html hljs language-xml"><span class="hljs-comment">&lt;!-- 模态窗口触发按钮 --&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-primary"</span> (<span class="hljs-attr">click</span>)=<span class="hljs-string">"openModal()"</span>&gt;</span>打开模态窗口<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
      
      <span class="hljs-comment">&lt;!-- 模态窗口模板 --&gt;</span>
      <span class="hljs-tag">&lt;<span class="hljs-name">ng-template</span> #<span class="hljs-attr">content</span> <span class="hljs-attr">let-modal</span>&gt;</span>
        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-header"</span>&gt;</span>
            <span class="hljs-tag">&lt;<span class="hljs-name">h4</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-title"</span>&gt;</span>模态窗口标题<span class="hljs-tag">&lt;/<span class="hljs-name">h4</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"close"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"关闭"</span> (<span class="hljs-attr">click</span>)=<span class="hljs-string">"modal.dismiss('关闭')"</span>&gt;</span>
                      <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">aria-hidden</span>=<span class="hljs-string">"true"</span>&gt;</span><span class="hljs-symbol">&amp;times;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
                          <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
                            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
                              <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-body"</span>&gt;</span>
                                  <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>模态窗口内容<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
                                    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
                                      <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"modal-footer"</span>&gt;</span>
                                          <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-secondary"</span> (<span class="hljs-attr">click</span>)=<span class="hljs-string">"modal.close('保存')"</span>&gt;</span>保存<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
                                              <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"btn btn-outline-secondary"</span> (<span class="hljs-attr">click</span>)=<span class="hljs-string">"modal.dismiss('取消')"</span>&gt;</span>取消<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
                                                <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
                                                <span class="hljs-tag">&lt;/<span class="hljs-name">ng-template</span>&gt;</span></pre><div class="widget-codetool" style="display: none;">
      <div class="widget-codetool--inner">
                  <button type="button" class="btn btn-dark far fa-copy rounded-0 sflex-center copyCode" data-toggle="tooltip" data-placement="top" data-clipboard-text="import { Component, ViewChild } from '@angular/core';
                  import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
                  
                  @Component({
                    selector: 'app-modal-example',
                      templateUrl: './modal-example.component.html'
                      })
                      export class ModalExampleComponent {
                        @ViewChild('content') content: any;
                        
                          constructor(private modalService: NgbModal) { }
                          
                            openModal() {
                                this.modalService.open(this.content, { centered: true });
                                  }
                                  }" aria-label="复制" data-bs-original-title="复制"></button>
</div>
      </div><pre class="typescript hljs language-typescript"><span class="hljs-keyword">import</span> { <span class="hljs-title class_">Component</span>, <span class="hljs-title class_">ViewChild</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">'@angular/core'</span>;
      <span class="hljs-keyword">import</span> { <span class="hljs-title class_">NgbModal</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">'@ng-bootstrap/ng-bootstrap'</span>;
      
      <span class="hljs-meta">@Component</span>({
        <span class="hljs-attr">selector</span>: <span class="hljs-string">'app-modal-example'</span>,
          <span class="hljs-attr">templateUrl</span>: <span class="hljs-string">'./modal-example.component.html'</span>
          })
          <span class="hljs-keyword">export</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">ModalExampleComponent</span> {
            <span class="hljs-meta">@ViewChild</span>(<span class="hljs-string">'content'</span>) <span class="hljs-attr">content</span>: <span class="hljs-built_in">any</span>;
            
              <span class="hljs-title function_">constructor</span>(<span class="hljs-params"><span class="hljs-keyword">private</span> modalService: NgbModal</span>) { }
              
                <span class="hljs-title function_">openModal</span>(<span class="hljs-params"></span>) {
                    <span class="hljs-variable language_">this</span>.<span class="hljs-property">modalService</span>.<span class="hljs-title function_">open</span>(<span class="hljs-variable language_">this</span>.<span class="hljs-property">content</span>, { <span class="hljs-attr">centered</span>: <span class="hljs-literal">true</span> });
                      }
                      }</pre><p>在上述示例中，我们通过点击按钮触发 <code>openModal()</code> 方法来打开模态窗口。模态窗口的模板定义在 <code>&lt;ng-template&gt;</code> 标签内部，其中包含了模态窗口的标题、内容和底部按钮。在组件类中，我们使用 <code>NgbModal</code> 服务提供的 <code>open()</code> 方法来打开模态窗口，并将模板引用作为参数传递。</p><p>这只是一个简单的示例，您可以根据需要自定义模态窗口的样式和行为。Bootstrap ngb Modal 提供了更多的选项和功能，如模态窗口大小、动画效果、事件回调等，可以根据具体需求进行配置和使用。</p><p>总结：</p><p>Bootstrap ngb Modal 是一个用于创建模态窗口的组件，它是 Bootstrap 组件在 Angular 应用程序中的集成版本。它提供了灵活的界面，可以轻松创建各种类型的模态窗口，以展示临时内容、对话框、提示信息等。通过 ng-bootstrap 库，开发人员可以方便地在 Angular 应用程序中使用 Bootstrap ngb Modal 组件，并根据需求进行定制和配置。</p>