Polymer 1.x:模态纸质对话框出现在它的背景后面
Polymer 1.x: Modal paper-dialog appears behind its backdrop
对于解决模态框出现在背景后面的问题,有人有什么建议吗?
到目前为止,我已尝试确保拥有所有必要的导入(包括 <paper-dialog-scrollable>
)。
我还尝试了 "hack-fix" (suggested by someone),涉及在 paper-header-panel
的 css 中设置 z-index: auto
。都不行。
值得注意的是 <paper-dialog>
标签工作得很好。直到我添加 modal
属性。
有什么想法吗?
类似问题
出现在互联网上的是 this issue report and 。
我的-element.html
<script src="http://www.polymer-project.org/1.0/samples/components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html" />
<link rel="import" href="../../../bower_components/paper-dialog/paper-dialog.html">
<dom-module id="example-element">
<template>
<!-- Dialog -->
<paper-dialog id="contactDialog" modal>
<h2>Login</h2>
<paper-dialog-scrollable>
<form id="contact-form" autofocus>
<paper-input autofocus id="name" label="Your Name"></paper-input>
<paper-input id="email" label="Email Address"></paper-input>
</form>
</paper-dialog-scrollable>
<div class="buttons">
<paper-button dialog-dismiss>Cancel</paper-button>
<paper-button dialog-confirm>Accept</paper-button>
</div>
</paper-dialog>
<!-- Button -->
<paper-button id="login"
data-dialog="contactDialog"
on-tap="openDialog">Login</paper-button>
</template>
</dom-module>
<script>
(function() {
Polymer({
is: 'example-element',
properties: {...},
openDialog: function(){
this.$.contactDialog.open();
}
});
})();
</script>
从屏幕截图上看不太清楚,但问题是您的模态对话框出现在 <paper-drawer-panel>
后面,是吗?
如果是这样,我相信解决方案是相同的 :只需将对话框或包含对话框的自定义元素放在 <paper-drawer-panel>
之外,例如:
<paper-drawer-panel>
<paper-header-panel drawer>
<paper-toolbar>
<div>Drawer</div>
</paper-toolbar>
<paper-menu selected="{{_selected}}">
<paper-item>Item 1</paper-item>
<paper-item>Item 2</paper-item>
</paper-menu>
</paper-header-panel>
<paper-header-panel mode="standard" main>
<paper-toolbar>
<h1>[[_selected]]</h1>
</paper-toolbar>
<neon-animated-pages selected="{{_selected}}">
<paper-button raised on-tap="openDialog">Show Dialog</paper-button>
<div>Div</div>
</neon-animated-pages>
</paper-header-panel>
</paper-drawer-panel>
<example-element id="dialog"></example-element>
这是说明这一点的屏幕截图:
特别注意: 此答案适用于那些试图在 header 元素内实现 <paper-dialog modal>
元素的人。具体来说,在 <paper-drawer-panel>
.
里面
答案:
在this bug report rubenstolk上提供了一个hack-fix如下:
To implement @dhpollack's hack in a nice way, add this function to your custom element:
// https://github.com/PolymerElements/paper-dialog/issues/7
patchOverlay: function (e) {
if (e.target.withBackdrop) {
e.target.parentNode.insertBefore(e.target.backdropElement, e.target);
}
},
And add on-iron-overlay-opened="patchOverlay"
to all your <paper-dialog>
's
我已经对其进行了测试并验证它是否有效。所以现在,这解决了它。因此,我想现在等 the bug 固定就足够了。
这是我的解决方案:
openDialog: function(){
var body = document.querySelector('body');
Polymer.dom(body).appendChild(this.$.dialogId);
this.$.dialogId.open();
}
对于解决模态框出现在背景后面的问题,有人有什么建议吗?
到目前为止,我已尝试确保拥有所有必要的导入(包括 <paper-dialog-scrollable>
)。
我还尝试了 "hack-fix" (suggested by someone),涉及在 paper-header-panel
的 css 中设置 z-index: auto
。都不行。
值得注意的是 <paper-dialog>
标签工作得很好。直到我添加 modal
属性。
有什么想法吗?
类似问题出现在互联网上的是 this issue report and
<script src="http://www.polymer-project.org/1.0/samples/components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html" />
<link rel="import" href="../../../bower_components/paper-dialog/paper-dialog.html">
<dom-module id="example-element">
<template>
<!-- Dialog -->
<paper-dialog id="contactDialog" modal>
<h2>Login</h2>
<paper-dialog-scrollable>
<form id="contact-form" autofocus>
<paper-input autofocus id="name" label="Your Name"></paper-input>
<paper-input id="email" label="Email Address"></paper-input>
</form>
</paper-dialog-scrollable>
<div class="buttons">
<paper-button dialog-dismiss>Cancel</paper-button>
<paper-button dialog-confirm>Accept</paper-button>
</div>
</paper-dialog>
<!-- Button -->
<paper-button id="login"
data-dialog="contactDialog"
on-tap="openDialog">Login</paper-button>
</template>
</dom-module>
<script>
(function() {
Polymer({
is: 'example-element',
properties: {...},
openDialog: function(){
this.$.contactDialog.open();
}
});
})();
</script>
从屏幕截图上看不太清楚,但问题是您的模态对话框出现在 <paper-drawer-panel>
后面,是吗?
如果是这样,我相信解决方案是相同的 <paper-drawer-panel>
之外,例如:
<paper-drawer-panel>
<paper-header-panel drawer>
<paper-toolbar>
<div>Drawer</div>
</paper-toolbar>
<paper-menu selected="{{_selected}}">
<paper-item>Item 1</paper-item>
<paper-item>Item 2</paper-item>
</paper-menu>
</paper-header-panel>
<paper-header-panel mode="standard" main>
<paper-toolbar>
<h1>[[_selected]]</h1>
</paper-toolbar>
<neon-animated-pages selected="{{_selected}}">
<paper-button raised on-tap="openDialog">Show Dialog</paper-button>
<div>Div</div>
</neon-animated-pages>
</paper-header-panel>
</paper-drawer-panel>
<example-element id="dialog"></example-element>
这是说明这一点的屏幕截图:
特别注意: 此答案适用于那些试图在 header 元素内实现 <paper-dialog modal>
元素的人。具体来说,在 <paper-drawer-panel>
.
答案:
在this bug report rubenstolk上提供了一个hack-fix如下:
To implement @dhpollack's hack in a nice way, add this function to your custom element:
// https://github.com/PolymerElements/paper-dialog/issues/7
patchOverlay: function (e) {
if (e.target.withBackdrop) {
e.target.parentNode.insertBefore(e.target.backdropElement, e.target);
}
},
And add
on-iron-overlay-opened="patchOverlay"
to all your<paper-dialog>
's
我已经对其进行了测试并验证它是否有效。所以现在,这解决了它。因此,我想现在等 the bug 固定就足够了。
这是我的解决方案:
openDialog: function(){
var body = document.querySelector('body');
Polymer.dom(body).appendChild(this.$.dialogId);
this.$.dialogId.open();
}