javascript - Angular Modal Service - 如何从外部关闭？

Question

这是angular-modal-service github .

这些是angular-modal-service examples .

每个示例都有 HTML 和 JavaScript 文件，我正在开发没有 Bootstrap 的“自定义模态”，CSS 文件是:

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

“简单是/否模态”和“复杂模态”。可以通过单击模式外部来关闭它们。但“自定义模态”却做不到。

如何在不使用Bootstrap的情况下从外部关闭？

Answer 1

嗨，alvarezsh，我解决了这个问题，在我的模态 Controller 上添加了一个 eventListener，然后搜索模态名称以将其关闭。这是我使用的代码。

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

addEventListener('click', dismissModal);