Comment empêcher un modal de se fermer lorsqu'on clique dessus en dehors du modal dans Angular ?

Question

J'ai lu plusieurs questions/réponses sur ce problème et toutes les suggestions sont une solution très simple : ajoutez

dans la balise HTML du bouton responsable de l'ouverture du modal

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

Pour moi ce bouton c'est :

<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>

La case modale complète est :

<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>

Mais chaque fois que j'appuie sur la touche ESC ou que je clique en dehors du modal, il se ferme. J'ai aussi essayé de le gérer depuis TS, en utilisant @ViewChild modal（引用模态框的DOM div），以及一个dialog: MatDialog属性，然后在按下Delete按钮时调用的onDelete()方法中，我只是简单地输入了this.modal.open(dialog, { disableClose: true });, mais cela n'a pas fonctionné non plus. Je préférerais simplement le résoudre à partir de HTML. Y a-t-il quelque chose qui me manque ? (J'utilise angulaire 14.1.1 et bootstrap v5)

Answer 1

Backdrop doit être défini sur statique afin que le modal ne se ferme pas lorsque vous cliquez à l'extérieur, mais il est défini sur 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>