Question

这可能是一个需要解决的简单问题。我正在寻找一种方法来设置主机元素的不透明度（即任何不是纸张对话框本身的东西）切换纸张对话框。换句话说，模糊弹出对话框周围的背景。这是一个聚合物功能，展示了我想要实现的目标。设置this.style.opacity也会更改searchDialog的不透明度。不是我所希望的，但它不应该是令人惊讶的，因为纸对话框实例属于＆＃39;这个＆＃39; （＆＃39;这是母体聚合物元素）。我可以自己设置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

从docs纸张对话框支持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>

聚合物纸 - 对话框 - 在背景上打开设置不透明度

1 个答案: