Question: I have an angular project that uses 2 bootstrap modal components. The first modal is a form and while the other is just confirmation for the user if he/she wants to exit the form. I forked a plunker similar to my problem. What I want is to prevent the second model from closing when the user clicks outside the modal. I already tried adding this "data-backdrop="static" data-keyboard="false"" to the second modal but it's not working. 

```
<popup #modal1 data-backdrop="static" data-keyboard="false">
<div class="popup-header">
  Form
</div>
<div class="popup-body">
  Name
  <input type="text">
</div>
<div class="popup-footer">
  <button type="button" class="btn btn-default" (click)="modal2.show()">Close</button>
    <button type="button" class="btn btn-primary">Save</button>
</div>

```

```
<popup #modal2  data-backdrop="static" data-keyboard="false">
<div class="popup-header">
  Warning
</div>
<div class="popup-body">
  Are you sure you want to exit
</div>
<div class="popup-footer">
  <button type="button" class="btn btn-default" (click)="modal2.hide()">Cancel</button>
  <button type="button" class="btn btn-primary" (click)="modal2.hide() ; modal1.hide()">Close</button>
</div>

```

Here's the plunkr. <https://plnkr.co/edit/hIinDea4XNVeJEkXTixW?p=preview>

Answer: 
here is a plunker: <https://plnkr.co/edit/U8gRRF9S2qZfzGUasFEK>

1. Use HostListener from Angular to get event from host
2. Use Input param to configure you model
3. Consider to use ng2-boostrap library

for second model: 

```
<popup #modal2 [isStatic]="'true'">

```

for modal component: 

```
@Component({
selector: 'popup',
template: `
<div class="modal fade"
tabindex="-1" [ngClass]="{'in': visibleAnimate}"
     [ngStyle]="{'display': visible ? 'block' : 'none', 'opacity': visibleAnimate ? 1 : 0}">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <ng-content select=".popup-header"></ng-content>
      </div>
      <div class="modal-body">
        <ng-content select=".popup-body"></ng-content>
      </div>
      <div class="modal-footer">
        <ng-content select=".popup-footer"></ng-content>
      </div>
    </div>
  </div>
</div>
`,
styles: [`
  .modal {
    background: rgba(0,0,0,0.6);
  }
`]
 })
 export class ModalComponent {
@Input() isStatic : boolean;
public visible = false;
private visibleAnimate = false;

constructor(){}

public show(): void {
  this.visible = true;
  setTimeout(() => this.visibleAnimate = true, 100);
}

public hide(): void {
  this.visibleAnimate = false;
  setTimeout(() => this.visible = false, 300);
}
/*
public onContainerClicked(event: MouseEvent): void {
  if ((<HTMLElement>event.target).classList.contains('modal')) {
    this.hide();
  }
}*/

@HostListener('click',  ['$event.target'])
public onClick(target): void {
  if(target.classList.contains('modal')) {
    if(this.isStatic) {
      return;
    }
    else {
       this.hide();
    }
  }
}
}     

```
You have to import modal js to make it work. Your plunker only has CSS imported.

I would recommend you to use another control instead. Here is how to intercept hide event.

```
$('#myModal').on('hide.bs.modal',function(e){
    if (...) { // put your own logic here.
        e.preventDefault(); // prevent modal from being closed.
    }
}).modal();

```

Or use backdrop:

```
$('#myModal').modal({backdrop:'static'});

```