Disable click event outside of bootstrap modal area to close modal in angular 4

Question

I am new in anguar4. I am using bootstrap modal in my project. Modal is going to hide when click on outside of modal. here is my code

//in html

<div bsModal #noticeModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" 
    aria-labelledby="myLargeModalLabel"
    aria-hidden="true">

    <div class="modal-dialog modal-md">
        <div class="modal-content">
              Hello World
        </div>
    </div>
</div>

// in ts code

@ViewChild('noticeModal') public noticeModal: ModalDirective;

ngAfterViewInit() {
   this.noticeModal.show();
};

Solution 1

please add this config's in html. Hope it will help your problem.

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

    <div class="modal-dialog modal-md">
        <div class="modal-content">
              Hello World
        </div>
    </div>
</div>

Solution 2

If you are using button to open popup, then use below config on button,

<button data-target="#myModal" data-toggle="modal" 
data-backdrop="static" 
data-keyboard="false">

Solution 3

btw, if you'll use the component approach for bsModal via BsModalService, you can simply set: ignoreBackdropClick = false(Ignore the backdrop click) as it described in the Angular Bootstrap API reference

your.component.ts

constructor(private bsModalService: BsModalService) {}

const bsModal = this.bsModalService.show(YourModalComponent, {
    class: 'modal-dialog-centered modal-md',
    ignoreBackdropClick: true
});

P.S. It is better to use this approach than inside of your HTML template. Think about reusability ;)

Solution 4

Below solution work for me by adding {backdrop: 'static', keyboard: false}； when call the modal --> $('#myModal').modal({backdrop: 'static', keyboard: false})；

It work for me without adding bsModal into <div> or any directive modules.

A clearer solution as shown below: HTML:

 <div #crudModal class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-md">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">Modal Title</h4>
      </div>
      <div class="modal-body">        
      </div>
      <div class="modal-footer">       
      </div>
    </div>
  </div>
</div>

In .ts

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';

@ViewChild('crudModal') crudModal: ElementRef;

openModal() {
    $(this.crudModal.nativeElement).modal({backdrop: 'static', keyboard: false});
}

Hope it helps.

View more solutions

Comments

[rohit13807]

Hello, It is not working for me. It is giving error: Can't bind to 'config' since it isn't a known property of 'div'.

[Pedro Lima]

This usually happens when one doesn't properly configure the bsModal directive in their module.

[Vibin Guevara]

data-backdrop="static" data-keyboard="false" These are the key attributes. But they need to be added where the modal is declared not on the <button> tag.