弹出窗口显示在页面下方而不是弹出窗口答案

【问题标题】：Popup showing below page instead of as popup弹出窗口显示在页面下方而不是弹出窗口
【发布时间】：2017-10-29 12:39:31
【问题描述】：

我正在尝试在angular 4 应用程序中使用alertify，但我似乎无法让它工作。

所以我首先通过添加css 将alertify 添加到我的组件中

 styleUrls: [
    './myComponent.component.scss',
    '../../../node_modules/alertifyjs/build/css/alertify.css'
  ]

现在我导入库：

import * as alertify from 'alertifyjs';

稍后在我放置的按钮单击触发的函数中

alertify.prompt('Prompt Message');

popup 显示为我整个组件正下方的块元素，而不是 popup。

我不确定自己做错了什么？

【问题讨论】：

alertify 弹出窗口似乎使用了在 alertify.css 文件中设置的绝对定位。您能否确保该文件已实际下载并应用到您的组件中，或者是否有某些内容覆盖了 ajs-modal 类样式
是的，它似乎是捆绑包的一部分。
使用webpack dev-server，我绝对可以看到bundle中的css文件。但是，当使用 Chrome 开发工具时，似乎没有应用任何样式。我最好的客人是 css 封装在我的组件中，prompt 是在我的组件之外创建的？

【解决方案1】：

好的，即使我不喜欢我正在使用的解决方案，我也可以使用它。所以我注意到alertify 被放入了供应商捆绑包中（这是有道理的）。所以我用了：

encapsulation: ViewEncapsulation.None,

所以它会看到供应商包中的样式。

我尝试的另一种方法是将这条线放在style.css：

@import '~alertifyjs/build/css/alertify.css';

比添加

  styleUrls: [
    './myComponent.component.scss',
    '../../../node_modules/alertifyjs/build/css/alertify.css',
    '../../styles.css'
  ],

并删除encapsulation: ViewEncapsulation.None,。不幸的是，这并没有像我希望的那样奏效。

我不喜欢我使用的方法，因为我失去了封装。

如果有人能提出不同的解决方案，请告诉我。

【讨论】：

如果添加到styles.css，您不需要将该样式导入到您使用它的每个组件中，或者根本不需要混淆视图封装。如果添加到 styles.css 不起作用，请检查该 css 是否正确加载，以及您是否覆盖了应用程序中其他地方的任何样式。此外，不需要将 ../../styles.css' 添加到所有组件中，它包含在整个应用程序中。
取出'../../../node_modules/alertifyjs/build/css/alertify.css', 还是不行。我查看了样式包，确实在其中看到了 alertifyjs css，但它似乎仍然不起作用。我没有覆盖任何样式。仍在试图弄清楚我在做什么。