ventana tamaño modal large form example data color bootstrap modal-dialog polymer polymer-1.0 paper-elements

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


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 .