聚合物1.x:“纸-对话框"模态出现在app-header-layout的后面 [英] Polymer 1.x: paper-dialog modal appears behind app-header-layout
问题描述
我想在app-header-layout中放入一个子元素(子元素).子元素包含paper-dialog modal.当我打开模态时，我希望看到对话框出现在背景的 front 中.相反，该对话框显示在背景的后面.
I want to put a sub-element (child) inside an app-header-layout. The sub-element contains a paper-dialog modal. When I open the modal I expect to see the dialog box appear in front of the backdrop. Instead, the dialog appears behind the backdrop.
如何使模式对话框显示在背景的前面?还是这是app-drawer-layout或app-header-layout元素中新发现的错误?
How do I get the modal dialog to appear in front of the backdrop? Or is this perhaps a newly discovered bug in the app-drawer-layout or app-header-layout elements?
这是小家伙. ... http://plnkr.co/edit/ZjPHGqkt8vvDbFdF4CNn?p=preview
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="import" href="x-app.html">
</head>
<body>
<x-app></x-app>
</body>
</html>
x-app.html
x-app.html
<link href="content-el.html" rel="import">
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link href="app-layout/app-drawer/app-drawer.html" rel="import">
<link href="app-layout/app-drawer-layout/app-drawer-layout.html" rel="import">
<link href="app-layout/app-header-layout/app-header-layout.html" rel="import">
<link href="app-layout/app-header/app-header.html" rel="import">
<link href="app-layout/app-toolbar/app-toolbar.html" rel="import">
<link href="iron-icon/iron-icon.html" rel="import">
<link href="iron-icons/iron-icons.html" rel="import">
<link href="paper-icon-button/paper-icon-button.html" rel="import">
<dom-module id="x-app">
<template>
<style></style>
<app-drawer-layout>
<app-drawer>
drawer-content
</app-drawer>
<app-header-layout>
<app-header>
<app-toolbar>
<paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
<div main-title>MyNewApp</div>
</app-toolbar>
</app-header>
<content-el></content-el>
</app-header-layout>
</app-drawer-layout>
</template>
<script>
(function(){
Polymer({
is: 'x-app',
properties: {},
});
})();
</script>
</dom-module>
content-el.html
content-el.html
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
<link href="paper-dialog/paper-dialog.html" rel="import">
<dom-module id="content-el">
<template>
<button on-tap="show">Click to show dialog</button>
<paper-dialog id="dialog" modal>
<h2>Header</h2>
<div>Dialog body</div>
</paper-dialog>
</template>
<script>
(function(){
Polymer({
is: 'content-el',
properties: {},
show: function() {
this.$.dialog.open();
},
});
})();
</script>
</dom-module>
推荐答案
这是已知的(请参阅此 github问题)，但不幸的是效果不是很好记录了 iron-overlay-behavior 的限制，该限制由paper-dialog:
This is a known (see this and this github issue) but unfortunately not very well documented limitations of the iron-overlay-behavior, that is used by paper-dialog:
您必须确保没有元素具有更高的堆叠上下文 z-index比其父堆栈上下文更大.你应该把这个 元素尽可能地作为子元素.
You must ensure no element has a stacking context with a higher z-index than its parent stacking context. You should place this element as a child of whenever possible.
一种解决方法是将paper-dialog移到content-el之外，也移到app-header-layout之外(移到index.html或作为根my-app元素的直接子元素).您可以触发一个事件(即open-dialog并在您的根元素中处理该事件).
One workaround is to move the paper-dialog outside of the content-el and also outside of theapp-header-layout (either into the index.html or as a direct child of your root my-app element). You can fire an event (i.e. open-dialog and handle that in your root element).
这篇关于聚合物1.x:“纸-对话框"模态出现在app-header-layout的后面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
