Bagaimana untuk menghalang modal daripada ditutup apabila diklik di luar modal dalam Angular?

Question

Saya telah membaca beberapa Soal Jawab tentang masalah ini dan semua cadangan adalah penyelesaian yang sangat mudah: tambahkan

dalam tag HTML butang yang bertanggungjawab untuk membuka modal

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

Bagi saya butang ini ialah:

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

Kotak modal lengkap ialah:

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

Tetapi setiap kali saya tekan kekunci ESC atau klik di luar modal, ia akan ditutup. Saya juga cuba menguruskannya daripada TS, menggunakan @ViewChild modal（引用模态框的DOM div），以及一个dialog: MatDialog属性，然后在按下Delete按钮时调用的onDelete()方法中，我只是简单地输入了this.modal.open(dialog, { disableClose: true });, tetapi itu tidak berjaya juga. Saya lebih suka menyelesaikannya dari HTML. Adakah terdapat apa-apa yang saya hilang? (Saya menggunakan sudut 14.1.1 dan bootstrap v5)

Answer 1

Tirai latar mesti ditetapkan kepada statik supaya modal tidak tertutup apabila mengklik di luarnya, tetapi ia ditetapkan kepada 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>