聚合物1.x：紙張對話框模式出現在應用程序標題佈局

我想要在app-header-layout中放置一個子元素（子）。子元素包含paper-dialog modal。當我打開模式時，我希望看到對話框出現在背景的前面。相反，對話框出現在的背景下。聚合物1.x：紙張對話框模式出現在應用程序標題佈局

如何獲取模式對話框出現在背景前？或者這可能是app-drawer-layout或app-header-layout元素中新發現的錯誤？

Here is the plunk。 ... 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>

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

來源

2016-10-01 Mowzer

奇怪 - 我下載了plunk並使用chrome開發工具在本地運行它。覆蓋圖的z-索引爲102，對話框的z-索引爲103，但仍位於覆蓋圖的後面。 – akc42

@ akc42背後的原因是'app-header-layout'和'＃contentContainer'（紙對話框的父母）的'z-index：0'。 – a1626

@ a1626：[所有這些都可能與此SO問題有關（http://stackoverflow.com/q/39502060/1640892）？ ... http://stackoverflow.com/q/39502060/1640892 – Mowzer

這是已知的（見this和this github上的問題），但不幸的是iron-overlay-behavior沒有很好記錄的限制，即使用paper-dialog：

您必須確保沒有元素具有比其父級堆棧上下文更高的z-index的堆棧上下文。您應該儘可能將此元素作爲子元素。

一個解決方法是將paper-dialog外content-el的移動，還外app-header-layout的（無論是進入index.html或作爲根my-app元素的直接孩子）。您可以觸發一個事件（即open-dialog並在您的根元素中處理該事件）。

來源

2016-10-02 20:59:16

聚合物1.x：紙張對話框模式出現在應用程序標題佈局

回答

相關問題