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

【问题标题】：Angular Modal Service - How to close from outside?Angular Modal Service - 如何从外部关闭？
【发布时间】：2016-09-19 23:24:25
【问题描述】：

这是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 的情况下从外部关闭？

【问题讨论】：

标签： javascript angularjs modal-dialog

【解决方案1】：

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

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

addEventListener('click', dismissModal);

【讨论】：