0

这可能是一个很容易解决的问题。我正在寻找一种方法来在切换纸质对话框时设置宿主元素的不透明度（即任何不是纸质对话框本身的东西）。换句话说，模糊弹出对话框周围的背景。这是一个聚合物功能，展示了我想要实现的目标。设置this.style.opacity也会更改 searchDialog 的不透明度。不是我所希望的，但这并不奇怪，因为纸质对话框实例属于“this”（“this”是母聚合物元素）。我可以自行设置 searchDialog 的不透明度 ( this.$.searchDialog.style.opacity)，但它不允许不透明度值高于其父元素（仅更低）。

基本上，我只是想强调纸质对话，防止用户被背景中的内容分散注意力。在对话框关闭（或在对话框之外点击）时，将返回正常的不透明度值。有什么建议么？正如你所知道的......我不是 CSS 专家，对聚合物仍然很陌生。

toggleSearchDialog: function(transition) {
    this.$.searchDialog.toggle(transition);
    this.style.opacity = "0.5";
    this.$.searchDialog.style.opacity = "1.0";
}
4

1 回答 1

1

从文档中， paper-dialog 支持backdrop在页面上放置背景覆盖的属性。

<paper-dialog heading="Dialog" backdrop>

演示：http: //jsbin.com/niraqusiwiki/1/edit

您可以使用.core-overlay-backdrop该类自定义样式：

<style>
  .core-overlay-backdrop {
    background: rgba(255,0,0.15);
  }
</style>
于 2014-09-16T21:52:51.727 回答