聚合物适合抽屉顶部的纸张对话框显示

Polymer fitInto paper-dialog show on top of drawer

本文关键字：对话框 显示 顶部 聚合物      更新时间：2023-09-26

只是想把我的纸质对话框放在入门套件聚合物的"内容"div内，它没有显示在抽屉顶部。

<paper-dialog opened modal fit-into="{{content}}">MY DIALOG</paper-dialog>

我尝试

ready: function() {
     this.content = Polymer.Base.$$('#content'); '' null
}

和

Polymer.Base.$$('body').querySelector('#content')  '' null
Polymer.Base.$$('body').getElementById('#content') '' null
document.getElementById("#content")

我没有找到从影子 dom 外部检索div 的方法。它始终返回未定义或空值。我只能成功取回尸体。

内容位于索引上.html其中包含我的自定义元素

<body> 
   ...
   <div id="content">

更新：

Kable 回答后，对话框非常适合我的内容div，但模态的覆盖层仍然覆盖了抽屉顶部的整个页面。 我想我可以通过在这里和那里放置一些 z 索引来解决这个问题，但我希望约束覆盖层以仅适合容器div？

首先，您实际上不需要使用Polymer.Base.$$('body')来选择正文，您只需使用document.body即可。

其次，在组件上调用 ready 时，#contentdiv 可能不可用。尝试改为在attached函数中访问它：

attached: function () {
    document.body.querySelector("#content");
}

如果这仍然不起作用，请尝试将其包装在async调用中：

attached: function () {
    this.async(function () {
        document.body.querySelector("#content");
    });
}

请参阅 https://www.polymer-project.org/1.0/docs/devguide/registering-elements.html#initialization-timing-for-siblings，了解为什么可能需要async调用。

相关文章：