¿Cómo detectar el evento cuando el usuario hace clic fuera del cuadro de diálogo modal bootstrap?

<!-- MODAL ZOOM  -->
<div class="modal fade" id="itinerary" tabindex="-1" role="dialog" aria-labelledby="modal-large-label">
      <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">                      
                  <div class="modal-body">    
                        BODY    
                  </div>    
            </div>
      </div>
</div>

<!-- /MOLDA ZOOM -->
0
Gelso77 10 sep. 2018 a las 17:40

4 respuestas

La mejor respuesta

Las soluciones propuestas no funcionaron para mí, encontré una solución alternativa: no permita que el usuario cierre la página modal cuando hace clic afuera. simplemente agregando estas propiedades data-backdrop = "static" data-keyboard = "false"

<div class="modal fade" data-backdrop="static" data-keyboard="false"  id="idmodal" tabindex="-1" role="dialog" aria-labelledby="modal-large-label">
  <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">                      
              <div class="modal-body">    
                    BODY    
              </div>    
        </div>
  </div>
1
Gelso77 12 sep. 2018 a las 11:05

Mi solución de trabajo fue definir la devolución de llamada como una entrada para Modal y llamarla en destruir.

Componente abierto modal

const modalRef = this._modal.open(MyComponent, options);
modalRef.componentInstance.afterClose = (response) => {
   // desired code here.
}

MyComponent implementa OnDestroy

@Input() afterClose: Function; // called after modal is closed.
constructor() {}
ngOnDestroy() {
   this.afterClose(response)
}
0
Bogdanel 15 ene. 2019 a las 16:00

Puede usar ng-click-outside como se muestra a continuación. Simplemente coloque el evento clickOutside en la etiqueta cuyo exterior desea capturar el evento de clic externo.

<div class="modal fade" id="itinerary" tabindex="-1" role="dialog" aria-labelledby="modal-large-label" (clickOutside)="onClickedOutside()">
  <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">                      
              <div class="modal-body">    
                    BODY    
              </div>    
        </div>
  </div>
1
Harunur Rashid 10 sep. 2018 a las 14:59

Probar esto:

@ViewChild('modal') modal: ElementRef;    
 ngAfterViewInit() {
     document.addEventListener('click', this.checkIfClickedInside, true);
 }

 checkIfClickedInside = (event: Event) => {
   let isClickInside = this.modal.nativeElement.contains(event.target);
   if (!isClickInside) console.log('clicked outside);
 };
0
SlimenTN 10 sep. 2018 a las 14:47