Ngx-bootstrap: bug(modal): data-backdrop="static", data-keyboard="false" not work

[Hongbo-Miao]

In Bootstrap 4, we can disable click outside of bootstrap model area to close modal by adding data-backdrop="static".
And data-keyboard="false" to prevent close on ESC button.

Like this:

<button class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal2</button>
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

However, either of them do not work on ng2-bootstrap modal.

<button class="btn btn-primary" (click)="lgModal.show()">Large modal</button>
<div bsModal #lgModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" (click)="lgModal.hide()" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">Large modal</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
    </div>
  </div>
</div>

[valorkin]

It is OK, it should work via option

[Hongbo-Miao]

Nice! Just saw API

[Hongbo-Miao]

@valorkin I tried these two, but neither of them works.

<div bsModal #lgModal="bs-modal" class="modal fade" [config]="{backdrop: false, keyboard: false}" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">

<div bsModal #lgModal="bs-modal" class="modal fade" config="{backdrop: false, keyboard: false}" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">

[Hongbo-Miao]

Since https://github.com/valor-software/ng2-bootstrap/issues/574 is similar, so I close this issue.

[calvinKG]

Hi Guys,

How those this fix work ?

[ctrl-brk]

[config]="{backdrop: 'static'}" works for me in 1.1.5

[AitanQamet]

$('#myModal').modal({backdrop: 'static', keyboard: false})；
try this , it works in my project.

[ghost]

@Component({
selector: 'ngx-app',
templateUrl: 'app.component.html'
})
export class AppComponent {
config = {
animated: true,
keyboard: true,
backdrop: false,
ignoreBackdropClick: true
};
bsModalRef: BsModalRef;
constructor(private modalService: BsModalService) {}

openClientModal() {
this.bsModalRef = this.modalService.show(ClientModalComponent, this.config);
console.log(this.bsModalRef);
this.bsModalRef.content.title = 'New Client';
}

}

works for me

[asabarimanigandan]

Could you pls share me your source code ?

[carlitospc]

@Hongbo-Miao la respuesta es de la siguiente forma:

[config]="{ignoreBackdropClick: true, keyboard: false}"
En el html, es decir:

<div bsModal #formularioModal="bs-modal" class="modal" tabindex="-1" role="dialog" aria-labelledby="formularioModalLabel" aria-hidden="false" [config]="{ignoreBackdropClick: true, keyboard: false}">
  <div class="modal-dialog modal-lg" role="document">

[shivamdawas]

it works @Hongbo-Miao
add this [config]="{ignoreBackdropClick: true, keyboard: false}"

[fabiomarcos70]

it works after a lot of others. Tks a lot