Полимер 1.x: Модный диалог с бумагой появляется за его фоном

Есть ли у кого-нибудь советы по устранению проблемы модальности, появляющейся за ее пределами?

До сих пор я пытался убедиться, что у меня есть все необходимые импорты (включая <paper-dialog-scrollable>).

Я также попробовал "hack-fix" (предложенный кем-то) с установкой z-index: auto в css paper-header-panel. Ничего не работает.

Стоит отметить, что тег <paper-dialog> работает просто отлично. Пока я не добавлю атрибут modal.

Любые идеи?

Похожие проблемы

Появляется через Интернет этот отчет и qaru.site/info/357001/....

мой-element.html 
<script src="http://www.polymer-project.org/1.0/samples/components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="#" onclick="location.href='http://www.polymer-project.org/1.0/samples/components/polymer/polymer.html'; return false;" />
<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>

Modal appears behind its backdrop.

Ответы

Ответ 1

Это мое решение:

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

Ответ 2

Специальное примечание: Этот ответ применяется к тем, кто пытается реализовать элемент <paper-dialog modal> внутри элемента заголовка. В частности, внутри <paper-drawer-panel>.

Ответ:

В эта ошибка отчет rubenstolk обеспечивает hack-fix следующим образом:

Чтобы реализовать @dhpollack взломать красиво, добавьте эту функцию в свой пользовательский элемент:

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

И добавьте on-iron-overlay-opened="patchOverlay" ко всем вашим <paper-dialog>

Я тестировал его и проверял, что он работает. Так что пока это решает. Поэтому, я полагаю, достаточно дождаться, пока исправлена ​​ошибка.

Ответ 3

Это было не совсем ясно из скриншота, но проблема в том, что ваш модальный диалог появляется за <paper-drawer-panel>, да?

Если это так, я считаю, что решение является тем же здесь: просто поместите диалог или настраиваемый элемент, содержащий диалоговое окно вне <paper-drawer-panel>, например:

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

Вот скриншот, иллюстрирующий это:

above and centered dialog