Angular Js Prevent Bootstrap Modal From Disappearing When Clicking Outside Or Pressing Escape

Have you ever encountered the frustration of a Bootstrap modal disappearing when you click outside it or press the Escape key in your AngularJS application? This can disrupt user experience and cause confusion. However, there's a simple solution to prevent this from happening and ensure your modals stay put until users intentionally close them.

When using AngularJS with Bootstrap modals, the default behavior allows the modal to close when the user interacts outside the modal or hits the Escape key. While this can be helpful in some cases, it may not always be desirable, especially when you want to ensure that users take a specific action within the modal before closing it.

To prevent the Bootstrap modal from disappearing when clicking outside or pressing Escape, you can leverage AngularJS directives and event handling to override the default behavior. Here's how you can achieve this:

### Prevent Modal Closure When Clicking Outside
When a user clicks outside the modal, Bootstrap triggers the modal dismissal event by default. To prevent this default behavior, you can intercept the click event and stop it from propagating to the modal. AngularJS makes this process straightforward with event listeners.

app.directive('stopEvent', function () {
  return {
    restrict: 'A',
    link: function (scope, element, attr) {
      element.on(attr.stopEvent, function (e) {
        e.stopPropagation();
      });
    }
  };
});

In the HTML template for your modal, add the `stop-event` directive to the modal content element that you want to prevent from closing:

<div class="modal-body">
  <!-- Modal content here -->
</div>

By attaching the `stop-event` directive to the modal body, you effectively stop the click event from reaching the modal itself, thus preventing it from closing when users interact outside the modal area.

### Disable Escape Key Closing
In addition to preventing closure when clicking outside the modal, you may also want to disable the Escape key from closing the modal. You can achieve this by listening for the Escape key press event and preventing the default action associated with it.

app.directive('disableEscape', function () {
  return {
    restrict: 'A',
    link: function (scope, element, attr) {
      element.on('keydown', function (e) {
        if (e.key === 'Escape') {
          e.preventDefault();
        }
      });
    }
  };
});

Add the `disable-escape` directive to the modal element in your HTML template:

<div class="modal fade" role="dialog">
  <!-- Modal content here -->
</div>

By incorporating the `disable-escape` directive, you effectively prevent the modal from closing when users press the Escape key within the modal window, ensuring that they can only close the modal through designated actions within the modal itself.

### Conclusion
By implementing these AngularJS directives and event handlers, you can customize the behavior of Bootstrap modals in your AngularJS application to prevent them from disappearing when users click outside or press the Escape key. This level of control enhances user experience by guiding user interactions and ensuring that modals remain open until users complete the intended actions. Enhance your application's usability and consistency by refining the modal behavior to suit your specific requirements.