0

これはおそらく簡単に解決できる問題です。紙のダイアログを切り替えるときに、ホスト要素 (つまり、紙のダイアログ自体ではないもの) の不透明度を設定する方法を探しています。つまり、ダイアログ ポップアップの周囲の背景をぼかします。これは、私が達成しようとしていることを示すポリマー関数です。設定this.style.opacityにより、searchDialog の不透明度も変更されます。私が望んでいたものではありませんが、紙ダイアログのインスタンスが「これ」に属しているため、驚くべきことではありません（「これ」は親ポリマー要素です）。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

docs 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 に答える