Polymer 1.x：模态纸质对话框出现在其背景后面

Question

对于解决模态出现在其背景后面的问题，有人有什么建议吗？

到目前为止，我已尝试确保拥有所有必要的导入（包括 <paper-dialog-scrollable>）。

我还尝试了一个“hack-fix”（suggested by someone），涉及在paper-header-panel 的css 中设置z-index: auto。两者都不起作用。

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

有什么想法吗？

类似问题

出现在互联网上的是this issue report和this Stackoverflow question。

我的元素.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> 元素的人。具体来说，在<paper-drawer-panel>内部。

答案：

在this 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> 中

我已经对其进行了测试并验证它是否有效。所以现在，这解决了它。因此，我想现在等到the bug 修复就足够了。

Answer 3

从截图看不太清楚，但问题是你的模态对话框出现在<paper-drawer-panel>后面，是吗？

如果是这样，我相信解决方案是相同的here：只需将对话框或包含对话框的自定义元素放在<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>

这是一个说明这一点的屏幕截图：