Polimero 1.x: la finestra di dialogo della carta modale appare dietro il suo fondale

Question

Qualcuno ha qualche consiglio per risolvere il problema di un aspetto modale dietro il suo fondale?

Finora, ho provato a verificare di disporre di tutte le importazioni necessarie (incluso <paper-dialog-scrollable>).

Ho anche provato un "hack-fix" (suggested by someone) che implica l'impostazione z-index: auto nel css di paper-header-panel. Né funziona.

Vale la pena notare che il tag <paper-dialog> funziona correttamente. Fino a quando non aggiungo l'attributo modal.

Qualche idea?

problemi simili

appare intorno internet sono this issue report e this Stackoverflow question.

my-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> 

Answer 1

Questa è la mia soluzione:

openDialog: function(){ 
    var body = document.querySelector('body'); 
    Polymer.dom(body).appendChild(this.$.dialogId); 
    this.$.dialogId.open(); 
} 

Answer 2

Non è stato abbastanza chiaro dallo screenshot, ma il problema è viene visualizzata la finestra di dialogo modale dietro la <paper-drawer-panel>, sì?

Se è così, credo che la soluzione è la stessa here: è sufficiente posizionare l'elemento di dialogo o personalizzato contenente la finestra di dialogo al di fuori del <paper-drawer-panel>, ad esempio:

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

Ecco uno screenshot che illustra questo:

Answer 3

Nota speciale:Questa risposta si applica a coloro che cercano di implementare un 0.123.elemento all'interno di un elemento di intestazione. Nello specifico, all'interno di <paper-drawer-panel>.

Risposta:

Su this bug rapporto rubenstolk fornisce un hack-fix come segue:

Per implementare @dhpollack 's hack un bel modo, aggiungere questa funzione al vostro elemento personalizzato:

// https://github.com/PolymerElements/paper-dialog/issues/7 
patchOverlay: function (e) { 
    if (e.target.withBackdrop) { 
    e.target.parentNode.insertBefore(e.target.backdropElement, e.target); 
    } 
}, 

E aggiungere on-iron-overlay-opened="patchOverlay" a 's tutti i tuoi <paper-dialog>

Ho testato e verifica che funziona. Quindi per ora, questo lo risolve. Pertanto, suppongo che sia ora sufficiente attendere che venga risolto the bug.