Wie kann verhindert werden, dass ein Modal geschlossen wird, wenn in Angular außerhalb des Modals darauf geklickt wird?

Question

Ich habe mehrere Fragen und Antworten zu diesem Problem gelesen und alle Vorschläge stellen eine sehr einfache Lösung dar: Fügen Sie

in das HTML-Tag der Schaltfläche ein, die für das Öffnen des Modals verantwortlich ist

data-backdrop="static" data-keyboard="false"

Für mich ist dieser Button:

<button type="button" class="btn btn-primary btn-danger m-2" data-bs-toggle="modal" data-bs-target="#exampleModal" data-backdrop="static" data-keyboard="false" (click)="onDelete(object.id)"><fa-icon [icon]="faTrash"></fa-icon></button>

Die komplette Modalbox ist:

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <!-- <h5 class="modal-title text-center" id="exampleModalLabel">Biztosan törölni akarod?</h5> -->
        <button type="button" #closeButton class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <h5 class="modal-title text-center" id="exampleModalLabel">Biztosan törölni akarod?</h5>
        <p class="text-center">A törlés megerősítésével az adatbázisból is eltávolításra kerül a rekord.</p>
      </div>
      <div class="modal-footer justify-content-center">
        <button type="button" class="btn btn-danger" data-bs-dismiss="modal" (click)="confirmDelete()">Törlés</button>
        <button type="button" class="btn btn-primary" data-bs-dismiss="modal" (click)="declineDelete()">Visszavonás</button>
      </div>
    </div>
  </div>
</div>

Aber jedes Mal, wenn ich die ESC-Taste drücke oder außerhalb des Modals klicke, wird es geschlossen. Ich habe auch versucht, es über TS mit @ViewChild modal（引用模态框的DOM div），以及一个dialog: MatDialog属性，然后在按下Delete按钮时调用的onDelete()方法中，我只是简单地输入了this.modal.open(dialog, { disableClose: true }); zu verwalten, aber auch das hat nicht funktioniert. Ich würde es lieber einfach aus HTML lösen. Gibt es etwas, das mir fehlt? (Ich verwende Angular 14.1.1 und Bootstrap v5)

Answer 1

Backdrop必须设置为static，这样当点击它外部时模态框不会关闭，但是它被设置为data-bs-backdrop="static"而不是data-backdrop="static"

<!-- 触发模态框的按钮 -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
  启动静态背景模态框
</button>

<!-- 模态框 -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">模态框标题</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">了解</button>
      </div>
    </div>
  </div>
</div>