Question

当我的模态paper-dialog附加到my-app.html时，解除它无法清除不透明的背景。但是，当对话框附加到my-app.html中的页面时，会在解雇时删除背景。

我有一个模式paper-dialog，我希望在多个页面之间共享，因此我将其放在my-app中。我已放入my-app所以：

<iron-pages role="main" selected="[[routeData.page]]" 
    attr-for-selected="name" selected-attribute="visible" 
    fallback-selection="404">
  <my-login name="" route="[[subroute]]"></my-login>
  <my-todos name="my-todos" route="[[subroute]]"></my-todos>
  ...
  <my-404-warning name="404"></my-404-warning>
</iron-pages>

<paper-dialog id="errorDlog" modal>
  <h2>Error</h2>
  <p>[[o_error]]</p>
  <div class="buttons">
    <paper-button dialog-confirm autofocus>Close</paper-button>
  </div>
</paper-dialog>

要使用从我的任何页面触发的自定义事件显示对话框，我按照Polymer的说明将我的监听器绑定到窗口（请参阅"Add and remove listeners imperatively"。使用此技术，我从{{1}打开对话框} my-login。但是当对话框变暗时，背景仍然是不透明的。

但是，如果我将window.dispatchEvent(new CustomEvent('o_error', {detail: 'login error'}));添加到id并my-login致电ready()，我会使用this.$.loginForm.addEventListener('o_error', e => this._errorListener(e));从my-login打开对话框）。现在解雇对话框确实清除了不透明背景。

所以，我有一个解决方法，但我认为我不应该this.dispatchEvent(...到每个页面。

Answer 1

我找到了错误的来源和解决方案。首先，我使用Node.js和Express，并且（大部分）在结构上跟随Wendy Ginsberg's recommendation。出现服务器路由

app.get('*', function(req, res){
  res.sendFile("index.html", {root: '.'});
});

触发两次 - 一次是针对缺失的页面，一次针对404路线本身。 iron-overlay-backdrop被覆盖，丢失的iron-overlay-backdrop 出现，即对话框试图关闭的内容。（注意，我说“出现”，因为我无法看到它在DevTools中出现。我猜是基于效果）。

我的解决方案是创建一个包含<error-dialog>和<paper-dialog>的{{1}}元素，并将EventListener放在<error-dialog>中：

index.html

现在，我可以使用

在我的应用程序的任何位置显示此对话框

<body>
  <my-app></my-app>
  <error-dialog></error-dialog>
  <noscript>
    Please enable JavaScript to view this website.
  </noscript>
</body>

总体而言，我喜欢Node.js，但它提出了一些挑战。例如，如果您使用的是Node.js＆amp ;,则不要let msg = ... const dlog = document.querySelector('error-dialog'); dlog.dispatchEvent(new CustomEvent('o_error', {detail: msg, bubbles: true, composed: true}));您的Polymer 404页面。 Express：Node.js控制台将显示不存在的页面的200状态，以及您的404消息应该为空的lazy-load。

Answer 2

if (active) {
    this.listenToOverlayChanges();
 } else {
    this.unlistenOverlayChanges();
 }

关闭模态纸张对话框失败删除不透明背景

2 个答案: