Polymer 1.x:模板纸对话框出现在其背景幕后

Question

有没有人有任何建议来解决背景背后出现的模态问题？

到目前为止,我已经尝试确保我拥有所有必要的导入(包括<paper-dialog-scrollable>).

我还尝试了一个"hack-fix"(由某人建议)涉及设置z-index: autocss paper-header-panel.两者都不起作用.

值得注意的是<paper-dialog>标签工作得很好.直到我添加modal属性.

有任何想法吗？

类似的问题

出现在互联网上的是此问题报告和此Stackoverflow问题.

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

这是我的解决方案:

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

Answer 2

特别注意: 此答案适用于那些试图<paper-dialog modal>在header元素中实现元素的人.特别是里面<paper-drawer-panel>.

回答:

在这个bug报告中,rubenstolk提供了一个hack-fix,如下所示:

要以一种很好的方式实现@dhpollack的hack,请将此函数添加到自定义元素:

// 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>的所有

我测试了它并验证它是否有效.所以现在,这解决了它.因此,我认为现在等到错误修复就足够了.