css - ionic popup - 如何对弹出容器而不是弹出窗口本身应用模糊效果？

Question

我想对背景应用以下效果。现在，当弹出窗口出现时，背景会淡一点。我试图使背景模糊。我读到 .popup-container 类是弹出窗口的外部背景。例如，将 .popup-container 的背景颜色更改为红色会使背景变为红色。我想使弹出窗口后面的文本或任何内容变得模糊。

我正在尝试添加模糊，但它似乎没有做任何事情。你能帮忙吗？ http://codepen.io/anon/pen/gPbQNZ

.my-popup.popup-container {
  filter: blur(2px);
}

Answer 1

你想要做的是有条件地应用一个类，使用 ng-class，到你的整个 View 。无论是您的 ion-content 还是只是一些 div 或其他什么。然后，您可以将这个新类的属性设置为模糊，就像您在上面使用 .popup-container 所做的那样。

应用此类的条件应该是您的弹出窗口打开时。

示例 here