Polymer 1.x：纸质对话框模式出现在 app-header-layout 后面答案

【问题标题】：Polymer 1.x: paper-dialog modal appears behind app-header-layoutPolymer 1.x：纸质对话框模式出现在 app-header-layout 后面
【发布时间】：2017-02-09 17:10:03
【问题描述】：

我想在app-header-layout 中放置一个子元素（子元素）。子元素包含paper-dialog modal。当我打开模式时，我希望看到对话框出现在背景的 front 中。相反，对话框出现在在背景之后。

如何让模态对话框出现在背景前面？或者这可能是app-drawer-layout 或app-header-layout 元素中新发现的错误？

Here is the plunk。 ...http://plnkr.co/edit/ZjPHGqkt8vvDbFdF4CNn?p=preview

索引.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="import" href="x-app.html">
  </head>
  <body>
    <x-app></x-app>
  </body>
</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>

内容-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>

【问题讨论】：

奇怪 - 我下载了 plunk 并使用 chrome 开发工具在本地运行它。叠加层的 z-index 为 102，对话框的 z-index 为 103，但仍位于叠加层之后。
@akc42 背后的原因是z-index:0 的app-header-layout 和#contentContainer（纸质对话的父母）。
@a1626: Could all this be potentially related to this SO question as well? ...*.com/q/39502060/1640892

标签： polymer polymer-1.0 paper-elements plunker app-elements

【解决方案1】：

这是一个已知的（参见this 和this github 问题），但不幸的是，iron-overlay-behavior 的限制没有得到很好的记录，paper-dialog 使用的限制：

您必须确保没有元素具有更高的堆叠上下文 z-index 大于其父堆叠上下文。你应该把这个尽可能将元素作为子元素。

一种解决方法是将paper-dialog 移出content-el 和app-header-layout（移入index.html 或作为根my-app 元素的直接子元素）。您可以触发一个事件（即open-dialog 并在您的根元素中处理它）。

【讨论】：