폴리머 용지 대화 상자 - 배경의 열린 불투명도 설정시

Question

이 문제는 해결하기가 쉽지 않습니다. 종이 대화 상자를 토글 링 할 때 호스트 요소의 불투명도 (즉, 종이 대화 자체가 아닌 모든 요소)를 설정하는 방법을 찾고 있습니다. 즉, 대화 상자 팝업 주위의 배경을 흐리게 처리하십시오. 다음은 내가 달성하고자하는 것을 보여주는 폴리머 기능입니다. this.style.opacity을 설정하면 searchDialog의 불투명도도 변경됩니다. 내가 원했던 것은 아니지만 종이 대화 상자 인스턴스가 'this'('this'는 모체 고분자 요소)에 속해 있기 때문에 놀랄만 한 것은 아닙니다. searchDialog의 불투명도를 자체적으로 (this.$.searchDialog.style.opacity) 설정할 수 있지만 부모 요소보다 낮은 불투명도 값은 허용하지 않습니다 (하위에만 있음).

기본적으로, 나는 종이 대화를 강조하여 사용자가 백그라운드에서 혼란스럽게되는 것을 방지하려고합니다. 다이얼로그 해고 (또는 다이얼로그 외부에서 탭핑)시, 보통의 불투명 값이 반환됩니다. 어떤 제안? 당신이 말할 수 있듯이 ... 저는 CSS 전문가가 아니며 여전히 폴리머에 익숙하지 않습니다. docs 용지 대화 상자에서

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

Answer 1

페이지를 통해 배경 오버레이를두고 backdrop 속성을 지원합니다.

<paper-dialog heading="Dialog" backdrop> 

데모 : 당신은 .core-overlay-backdrop 클래스와 그의 스타일을 사용자 정의 할 수 있습니다 http://jsbin.com/niraqusiwiki/1/edit

:

<style> 
    .core-overlay-backdrop { 
    background: rgba(255,0,0.15); 
    } 
</style>