CODEWITHSUNDEEP
javascriptangularjsmodal-dialog
alvarezsh
alvarezsh

Reputation: 503

Angular Modal Service - How to close from outside?

This is angular-modal-service github.

These are angular-modal-service examples.

Each example has HTML and JavaScript files, I am developing "Custom Modal" without Bootstrap, The CSS file is:

CSS:

#overlay {
    position: fixed;
    left: 25%;
    top: 25%;
    padding: 25px;
    border: 2px solid black;
    background-color: #ffffff;
    width: 50%;
    height: 50%;
    z-index: 100;
}
#fade {
    position: fixed;
    left: 0%;
    top: 0%;
    background-color: black;
    -moz-opacity: 0.7;
    opacity: .70;
    filter: alpha(opacity=70);
    width: 100%;
    height: 100%;
    z-index: 90;
}

#custom-modal.ng-enter {
  transition: opacity .5s ease-out;
  opacity: 0;
}
#custom-modal.ng-enter.ng-enter-active {
  opacity: 1;
}
#custom-modal.ng-leave {
  transition: opacity .5s ease-out;
  opacity: 1;
}
#custom-modal.ng-leave.ng-leave-active {
  opacity: 0;
}

"Simple Yes/No Modal" and "Complex Modal". They can be closed by clicking outside the modal. But "Custom Modal" can't do.

How to close from outside without Bootstrap?

Upvotes: 1

Views: 595

Answers (1)

Lucas Assmann
Lucas Assmann

Reputation: 41

Hi alvarezsh I solved that problem adding an eventListener on my modal controller, then searching the modal name to close it. Here is the code that I used.

let dismissModal = (ev) => {
  let localName = ev.target.tagName || '';
  if (localName === 'tt-modal') {
    removeEventListener('click', dismissModal);
    self.uaClose();
  }
};

addEventListener('click', dismissModal);

Upvotes: 1

Related Questions