stop closing the modal by clicking backdrop or outside the modal

Question

I have used one angular2 ng-bootstrap modal in our code.

I want the modal will not close when I click outside the modal. Currently the modal is getting closed while clicking outside.

In angular1 I used to do this by [keyboard]="false" [backdrop]="'static'". But this is time it is not working in angular2.

Here is my plunker

My Open method is as follows:

  open() {
    const modalRef = this.modalService.open(NgbdModalContent);
    modalRef.componentInstance.name = 'World';
  }

score 107 · Accepted Answer · answered Jan 11 '17 at 11:46

107

As per the answer of @anshuVersatile, I understand we need to use some modal options.

Then I create a object of NgbModalOptions and pass it as second parameter of my open method and it works.

Code is as follows :

let ngbModalOptions: NgbModalOptions = {
      backdrop : 'static',
      keyboard : false
};
console.log(ngbModalOptions);
const modalRef = this.modalService.open(NgbdModalContent, ngbModalOptions);

Here is the updated plunker.

answered Jan 11 '17 at 11:46

Partha Sarathi Ghosh

10,936
20
59
84

3

Note that there's a similar, but completely independent angular bootstrap library 'ngx-bootstrap'. The options you need to set are different for this - see https://valor-software.com/ngx-bootstrap/#/modals#service-disable-backdrop. You'll need `let config = { backdrop: true, ignoreBackdropClick: true };` then ... `this.modalService.show(SomeComponent, config);` – Chris Halcrow May 22 '18 at 06:00
loading... in plunker => Error {originalErr: Error, constructor: Object} – Thilina Sampath Jul 10 '18 at 04:37

score 15 · Answer 2 · answered Jan 03 '17 at 08:32

15

$modal.open({
   // ... other options
   backdrop  : 'static',
   keyboard  : false
});

While you creating your modal you can specify its behavior:

answered Jan 03 '17 at 08:32

anshuVersatile

2,030
1
11
18

2

Is it Angular2 code? I don't think so. I am expecting Angular2 code. – Partha Sarathi Ghosh Jan 03 '17 at 09:16
2

Yes, this _is_ Angular code (in fact it is just JavaScript as options to ng-bootstrap modal service are just an object literal). As the author of this component I can also say that it is a correct answer and should be accepted. Good job @anshuVersatile – pkozlowski.opensource Jan 10 '17 at 22:12
2

I am using TypeScript and Angular2 here, not JavaScript. – Partha Sarathi Ghosh Jan 11 '17 at 10:58

score 12 · Answer 3 · answered Feb 21 '19 at 17:50

Though it is late still it might be helpful for somebody else facing the issue:

 const config: ModalOptions = {
                backdrop: 'static',
                keyboard: false,
                animated: true,
                ignoreBackdropClick: true,
                initialState: {
                  data1: 'new-user',
                  username: 'test'
                }
              };
              this.bsModalRef = this.modalService.show(MyComponent, config);

initialState object is used to pass data to modal.

Working with ngx-bootstrap with angular 9 – SHUBHASIS MAHATA Mar 26 '20 at 11:32 — SHUBHASIS MAHATA, Mar 26 '20 at 11:32

score 5 · Answer 4 · answered Feb 10 '20 at 20:24

In case of ngx-bootstrap/modal in angular 2+ (bsmodal) use [config]="{ backdrop: 'static' }", .ts file like

import {ModalDirective} from 'ngx-bootstrap/modal';
@ViewChild('myModal') public myModal: ModalDirective;

 openpopup(){
     this.myModal.show()
  }

and .html like

<button class="btn btn-md btn-pill btn-success mb-3 pull-right" type="button" data-toggle="modal" (click)="openpopup()">Open</button>

 <div bsModal #myModal="bs-modal" class="modal fade"  [config]="{ backdrop: 'static' }"  tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">Popup heading</h4>
          <button type="button" class="close" (click)="myModal.hide()" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>

        <div class="modal-body">
          <!---- popup content here---->
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

I take it as answer. [config]="{ backdrop: 'static' }" – Sarath Mohandas Jan 16 '21 at 08:10 — Sarath Mohandas, Jan 16 '21 at 08:10

score 3 · Answer 5 · answered Aug 11 '20 at 14:24

In your component.ts file

import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
import { ViewChild, TemplateRef } from '@angular/core';

//--------

constructor(
    private modalService: BsModalService
  ) {}

@ViewChild('sampleModal', {static: true}) sampleModalRef: TemplateRef<any>;

modalRef: BsModalRef;

config = {
    backdrop: true,
    ignoreBackdropClick: true
  };

//-------

open() {
    this.modalRef = this.modalService.show(this.sampleModalRef, this.config);
  }

HTML

<ng-template #sampleModal>
      .
      .
      .
      .
</ng-template>

stop closing the modal by clicking backdrop or outside the modal

5 Answers5

Linked