Question

每个示例都有HTML和JavaScript文件，我正在开发＆＃34; Custom Modal＆＃34;没有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;
}

＆＃34;简单是/否模态＆＃34;和＃34;复杂的模态＆＃34;。可以通过单击模态外部来关闭它们。但是＆＃34; Custom Modal＆＃34;不能这样做。

如何在没有Bootstrap的情况下从外面关闭？

Answer 1

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

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

addEventListener('click', dismissModal);

角度模态服务 - 如何从外面关闭？

1 个答案: