聚合物纸对话框 - 关于背景的开放集不透明度

Question

这可能是一个很容易解决的问题。我正在寻找一种方法来在切换纸质对话框时设置宿主元素的不透明度（即任何不是纸质对话框本身的东西）。换句话说，模糊弹出对话框周围的背景。这是一个聚合物功能，展示了我想要实现的目标。设置 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";
}

Answer 1

从docspaper-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>