防止在 Esc 键按下时关闭 Bootstrap 模态

Question

我在我的项目中使用 NGX Bootstrap 模式。在模态框内我有一个表单，现在如果我按 Esc 键，模态框就会隐藏。

如果任何用户正在填写表单并突然按下 esc 键或尝试关闭父模式，我如何才能显示子模式（确认模式）。

如果有人按下 esc 键，是否有任何方法可以在不关闭父模式的情况下显示子模式。

    <button type="button" class="btn btn-primary" (click)="parentModal.show()">Open parent modal</button>

    <!-- parent modal -->

    <div class="modal fade" bsModal #parentModal="bs-modal" tabindex="-1" role="dialog" aria-labelledby="dialog-nested-name1">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <h4 id="dialog-nested-name1" class="modal-title pull-left">First modal</h4>
            <button type="button" class="close pull-right" aria-label="Close" (click)="parentModal.hide()">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <form>
               <div class="form-control">
                  <input type="text" placeholder="email" />
               </div>
               <div class="form-control">
                  <input type="text" placeholder="password" />
               </div>
               <button type="submit" class="btn-primary"></button>
            </form>
          </div>
        </div>
      </div>
    </div>

   <!-- confirmation modal --> 

    <div class="modal fade" bsModal #childModal="bs-modal" tabindex="-1" role="dialog" aria-labelledby="dialog-nested-name2">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h4 id="dialog-nested-name2" class="modal-title pull-left">Second modal</h4>
            <button type="button" class="close pull-right" aria-label="Close" (click)="childModal.hide()">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            Are you want to exit? Your changes will not be saved.<br>
            <button class="btn-danger">Discard</button>
            <button class="btn-primary">continue</button>
          </div>
        </div>
      </div>
    </div>

Answer 1

假设您使用的是 ng-bootstrap。

使用 modal.open 方法时，您可以将键盘属性传递为 false。

它的官方文档可以在以下位置找到：- https://ng-bootstrap.github.io/#/components/modal/api

例如：- this.ngbModal.open(content, {keyboard: false});