Angular: How to catch event when user clicks outside of bootstrap modal dialog?

bootstrap modal prevent close on click outside angular 2
bootstrap modal backdrop click event
mat-dialog close when click outside
close popover on click outside angular 4
reactstrap modal disable click outside
how to close a dialog box in angular when button clicked
angular close modal on escape
how to prevent modal close on outside click

How to catch event when user clicks outside of bootstrap modal dialog?

<!-- 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 -->

You can use ng-click-outside as below. Just put the clickOutside event in the tag of which outside you want to catch the click outside event.

<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>

Angular: How to catch event when user clicks outside of bootstrap , Jul 08, 2015 · Closing a Modal Popup when user Clicks Outside If this is your a div to open bootstrap modal. click event and determine whether the Popup was clicked. when we click outside of that element container in Angular. closest(​tagName) will You can find a detailed component API reference here. modal. I don't think this will help us though, because modal.close doesn't get rejected when a user clicks outside the modal to close it. We generally provide an anonymous function for the promise callbacks. Since you're invoking modal.element.on(), it does indeed get run every time. I think what you have will behave the same as doing this:

Solutions proposed didn't work for me, I found a workarond: don't allow to the user to close the modal page when he clicks outside. just adding these properties 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>

Click outside div to close react, Use Bootstrap's JavaScript modal plugin to add dialogs to your site for lightboxes, Before getting started with Bootstrap's modal component, be sure to read the For more information, read the modal events docs for details on relatedTarget . a click area for dismissing shown modals when clicking outside the modal. The first option disables closing modal on outside click. The second option prevents closing the bootstrap modal on pressing keyboard 'ESC' button. Let's do this by using only HTML method or by using jQuery. How to Prevent Closing Bootstrap Modal Using jQuery. To prevent closing bootstrap modal when click outside using jQuery.

Try this out:

@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);
 };

Modal · Bootstrap, Modals can be closed by clicking outside the modal window and I I ended up using angular events outside of ModalService. to deal with it by watching for the Bootstrap 'hidden.bs.modal' event. I don't think this will help us though, because modal.close doesn't get rejected when a user clicks outside  Prevent Twitter Bootstrap Modal Popup from closing when we click out side of the modal popup: I have see many of us don’t want to close the modal popup when user clicks outside area of modal popup, that is default behaviour of bootstrap modal popup we can disable it in different ways: Prevent Modal popup from closing in AngularJS:

My working solution was to define the callback as an input for Modal and call it on destroy.

Modal open Component

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

MyComponent implements OnDestroy

@Input() afterClose: Function; // called after modal is closed.
constructor() {}
ngOnDestroy() {
   this.afterClose(response)
}

Clicking outside modal does not trigger close promise · Issue #107 , It can also be closed by clicking outside of the dialog using hide method. id="​targetButton" (click)="onOpenDialog($event)">Open Dialog</button> <div #​container //To get all element of the dialog component after component get initialized. href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap​.min.css"  Disable click outside of bootstrap modal area to close modal. Bootstrap - Disallow bootstrap modal popup window from closing Hide close DIV when user clicks outside jquery 3.3.1

How to Close Dialog when click outside of its region in Angular , HTML Tags/Elements HTML Global Attributes HTML Event Attributes HTML Color Picker Answer: Use the Modal's backdrop Option. By default, if you click outside of the Bootstrap modal window i.e. on the But you can prevent this from happening by setting the modal's backdrop option to <div class="modal-dialog"​> when user click outside it the modal automatically close.. but i would love to run a jquery script in case an user click outside my modal.. It seems you want to prevent Bootstrap modal from closing when clicking outside.

How to Prevent Bootstrap Modal from Closing when Clicking Outside, The problem that I am having is that the 'close modal on … The click outside to close function works for the last modal but not the first, getElementById('id01'); // When the user clicks anywhere outside of the modal, close { if (event.target == modal) { modal.style.display = "none"; } } // Get the modal var modal = document. Angular 2 or 4 is a component-based framework with typescript, Components are major building blocks of it. A component can be defined as an independent cohesive block of code which has the required logic, view, and data as one unit.

Multiple modals - close on clicking outside function, events. in. Angular. Your front-end application will allow user input of data for Getting. ready. Let's add a Create New Post button on our blog application. on the button in the side panel to trigger a modal dialog from ng-bootstrap on the the modal when we click on a Cancel button or click outside the modal dialog itself. Angular directive for handling click events outside an element. Useful for things like reacting to clicking outside of a dropdown menu or modal dialog. Like binding to a regular click event in a template, you can do something like this: < div (clickOutside) = " onClickedOutside($event) " >My element</ div >

Comments
  • are you using plain Bootstrap or some other binding like ng-bootstrap ?? maybe also create a minimal reproducible example would help
  • in general using addEventListener is not a good practice. way better to use rxjs fromEvent()
  • @MassimoCosta can you provide a documentation for it ? I actually didn't know about it, and thanks in advance.
  • ERROR TypeError: Cannot read property 'nativeElement' of undefined ;-(