Polymer 1.x:模态纸质对话框出现在其背景后面 [英] Polymer 1.x: Modal paper-dialog appears behind its backdrop

问题描述

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

Does anybody have any advice for fixing the problem of a modal appearing behind its backdrop?

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

So far, I have tried making sure I have all the necessary imports (including <paper-dialog-scrollable>).

我还尝试了黑客修复"(某人建议) 涉及在 paper-header-panel 的 css 中设置 z-index: auto.两者都不起作用.

I also tried a "hack-fix" (suggested by someone) involving setting z-index: auto in the css of paper-header-panel. Neither works.

值得注意的是，<paper-dialog> 标签可以正常工作.直到我添加了 modal 属性.

It's worth noting that the <paper-dialog> tag works just fine. Until I add the modal attribute.

有什么想法吗?

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

Appearing around the internet are this issue report and this Stackoverflow question.

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

推荐答案

这是我的解决方案:

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

这篇关于Polymer 1.x:模态纸质对话框出现在其背景后面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！