Polymer 1.x: модальное диалоговое окно бумаги появляется за макетом приложения-заголовка

Я хочу поместить подэлемент (дочерний элемент) внутри app-header-layout. Подэлемент содержит paper-dialog modal. Когда я открываю модальное окно, я ожидаю, что диалоговое окно появится перед фона. Вместо этого диалоговое окно отображается за фоном.

Модал появляется за фоном

Как сделать так, чтобы модальное диалоговое окно появлялось перед фоном? Или это, возможно, недавно обнаруженная ошибка в элементах app-drawer-layout или app-header-layout?

Вот пример. ... http://plnkr.co/edit/ZjPHGqkt8vvDbFdF4CNn?p=preview

index.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>
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>

polymer paper-elements plunker polymer-1.0 app-elements
person Let Me Tink About It    schedule 01.10.2016    source источник
comment
Странно - я скачал планк и запустил его локально с помощью инструментов разработчика Chrome. Наложение имело z-индекс 102, а диалоговое окно — z-индекс 103, но все еще находилось за наложением.   -  person akc42    schedule 01.10.2016
comment
@ akc42 причиной этого является z-index:0 из app-header-layout и #contentContainer (родители paper-dialog).   -  person a1626    schedule 01.10.2016
comment
@ a1626: Может ли все это быть потенциально связано с этим вопросом SO? ... stackoverflow.com/q/39502060/1640892   -  person Let Me Tink About It    schedule 01.10.2016

Ответы (1)


arrow_upward
2
arrow_downward

Это известно (см. это и эта проблема github), но, к сожалению, не очень хорошо документированные ограничения iron-overlay-behavior, который используется paper-dialog:

Вы должны убедиться, что ни один элемент не имеет контекста наложения с более высоким z-индексом, чем его родительский контекст наложения. Вы должны поместить этот элемент как дочерний, когда это возможно.

Одним из обходных путей является перемещение paper-dialog за пределы content-el, а также за пределы app-header-layout (либо в index.html, либо как прямой дочерний элемент корневого элемента my-app). Вы можете запустить событие (например, open-dialog и обработать его в своем корневом элементе).

person Ümit    schedule 02.10.2016