I've read several Q&A's on this issue and all the suggestions are for a very simple solution: add
in the HTML tag of the button responsible for opening the modal.data-backdrop="static" data-keyboard="false"
For me, this button is:
<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>
The complete modal box is:
<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>
But every time I press ESC or click outside the modal, it closes. I also tried managing it from TS, using @ViewChild modal (referencing the modal's DOM div), and a dialog: MatDialog property, and then after pressing Delete In the onDelete() method called when pressing the button, I simply entered this.modal.open(dialog, { disableClose: true });, but nothing kick in. I'd prefer to just solve it from HTML. Is there anything I'm missing? (I'm using angular 14.1.1 and bootstrap v5)
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Backdrop must be set to static so that the modal does not close when clicking outside it, but it is set to
data-bs-backdrop="static"instead ofdata-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>