0

This is probably a simple problem to resolve. I'm looking for a way to set the opacity of the host element (i.e. anything that isn't the paper-dialog itself) upon toggling the paper-dialog. In other words, blur the background around the dialog pop up. Here is a polymer function demonstrating what I am trying to achieve. Setting this.style.opacity also changes the opacity for the searchDialog as well. Not what I was hoping but it should not be surprising as the paper-dialog instance belongs to 'this' ('this' being the parent polymer element). I can set the searchDialog's opacity on its own (this.$.searchDialog.style.opacity), but it doesn't allow for an opacity value higher than its parent element (only lower).

Basically, I'm just trying to emphasize the paper-dialog, preventing the user from being distracted by what is in the background. Upon dialog dismissal (or tapping outside of the dialog), the normal opacity value would return. Any suggestions? As you can tell...I'm not a CSS expert, and still new to polymer.

toggleSearchDialog: function(transition) {
    this.$.searchDialog.toggle(transition);
    this.style.opacity = "0.5";
    this.$.searchDialog.style.opacity = "1.0";
}
sinjins
  • 447
  • 10
  • 22

1 Answers1

1

From the docs paper-dialog supports a backdrop attribute that puts a background overlay over the page.

<paper-dialog heading="Dialog" backdrop>

Demo: http://jsbin.com/niraqusiwiki/1/edit

You can customize the styling of that with the .core-overlay-backdrop class:

<style>
  .core-overlay-backdrop {
    background: rgba(255,0,0.15);
  }
</style>
ebidel
  • 23,921
  • 3
  • 63
  • 76
  • Hey ebidel, would you mind giving me a general answer to my question here: http://stackoverflow.com/questions/25867182/. Pleeeeeease :) – LoveAndHappiness Sep 16 '14 at 23:10