Javascript 关闭带有聚合物芯覆盖层的对话框

我使用聚合物来构建一个对话框组件（如）

这是纸张对话框的一个示例：

<paper-dialog heading="Title for dialog">
  <p>Lorem ipsum ....</p>
  <p>Id qui scripta ...</p>
  <paper-button label="More Info..." dismissive></paper-button>
  <paper-button label="Decline" affirmative></paper-button>
  <paper-button label="Accept" affirmative autofocus></paper-button>
</paper-dialog>

同侧眼线

我要写剧本

在本例中，我想将“纸张”按钮移动到“纸张”对话框的模板。 如果有许多对话框具有相同的按钮，则会导致重复代码

将按钮移动到模板后，我无法再切换覆盖

你能在一个简化的例子中看到我的问题吗。

更改

OK

至

OK

这将导致对话框中的按钮调用切换功能

编辑

具有核心覆盖切换的按钮需要是核心覆盖的子元素。以下操作可以正常工作，但您已不再正确应用的样式。你必须把它加回去，让它做你想做的事

<polymer-element name="x-dialog">
<template>
<style>

</style>
<button on-tap="{{toggle}}">Toggle Dialog</button>

<core-overlay id="overlay" layered backdrop>
  <content></content>
  <button core-overlay-toggle>OK</button>
</core-overlay>

</template>
<script>

Polymer('x-dialog', {

  toggle: function() {

    this.$.overlay.toggle();
  }
});

</script>
</polymer-element>

<x-dialog id="dialog" >
<h2>Dialog</h2>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fringilla sapien sed   enim sollicitudin laoreet. Suspendisse suscipit, metus ac volutpat sodales, libero magna semper lacus, molestie fringilla massa orci ut arcu. Nullam sodales urna sit amet odio vehicula mattis.</div><br><br>


 </x-dialog>

切换对话框
好啊
聚合物（“x-dialog”{
切换：函数（）{
这个.$.overlay.toggle（）；
}
});
对话
Lorem ipsum dolor sit amet，是一位杰出的献身者。他是一位智者，他是一位智者。Suspendisse suscipit，metus ac Volvorit Pat sodales，libero magna semper lacus，molestie fringilla Masa orci ut arcu。我们的道路上有许多车辆。

这是一个解决问题的方法。我想知道为什么core overlay toggle属性不起作用。它似乎与您设置的结构有关。如果我创建了一个核心覆盖，并在其中放置了一个带有核心覆盖切换的按钮，它就可以正常工作。我还在摆弄它。你把带有核心切换属性的按钮放在-标签里面。我认为这解决了问题。