modal dialog - tamaño - Polymer 1.x: el diálogo de papel modal aparece detrás de su fondo
popup bootstrap example (3)
Esta es mi solución:
openDialog: function(){
var body = document.querySelector(''body'');
Polymer.dom(body).appendChild(this.$.dialogId);
this.$.dialogId.open();
}
¿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 similaresAparecen 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>
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:
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 .