Полимерная бумага-диалог - на открытой заданной непрозрачности фона

Question

Это, вероятно, простая проблема для решения. Я ищу способ установить непрозрачность элемента хоста (т. Е. Все, что не является собственно диалоговым окном бумаги) при переключении диалогового окна бумаги. Другими словами, размытие фона вокруг диалогового окна появляется. Вот полимерная функция, демонстрирующая то, чего я пытаюсь достичь. Установка this.style.opacity также изменяет непрозрачность для searchDialog. Не то, что я надеялся, но это не должно удивлять, поскольку экземпляр paper-dialog принадлежит этому «(« это »- родительский полимерный элемент). Я могу установить непрозрачность 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>