modal dialog - tamaño - Polymer 1.x: el diálogo de papel modal aparece detrás de su fondo

popup bootstrap example

Question

¿Alguien tiene algún consejo para solucionar el problema de un modal que aparece detrás de su fondo?

Hasta ahora, he intentado asegurarme de tener todas las importaciones necesarias (incluido <paper-dialog-scrollable> ).

También probé un "arreglo de pirateo" ( sugerido por alguien ) que involucraba la configuración de z-index: auto en el css de paper-header-panel . Ninguno de los dos funciona

Vale la pena señalar que la etiqueta <paper-dialog> funciona bien. Hasta que añada el atributo modal .

¿Algunas ideas?

Problemas similares

Aparecen en Internet el informe de este problema y esta pregunta de Stackoverflow .

mi-elemento.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

Esta es mi solución:

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

Answer 2

No quedó muy claro en la captura de pantalla, pero el problema es que el diálogo modal aparece detrás del <paper-drawer-panel> , ¿sí?

Si es así, creo que la solución es la misma here : simplemente coloque el cuadro de diálogo o el elemento personalizado que contiene el cuadro de diálogo fuera del <paper-drawer-panel> , por ejemplo:

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

Aquí hay una captura de pantalla que ilustra esto:

Answer 3

Nota especial: esta respuesta se aplica a aquellos que intentan implementar un elemento <paper-dialog modal> dentro de un elemento de encabezado. Específicamente, dentro de <paper-drawer-panel> .

Responder:

En este informe de error , rubenstolk proporciona un arreglo de hack de la siguiente manera:

Para implementar el hack de @dhpollack de una manera agradable, agregue esta función a su elemento personalizado:

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

Y agregue on-iron-overlay-opened="patchOverlay" a todos sus <paper-dialog>

Lo he probado y verifica que funcione. Así que por ahora, eso lo resuelve. Por lo tanto, supongo que es suficiente por ahora esperar hasta que se solucione el error .