Polymer 1.x:纸张对话框模式出现在应用程序标题布局后面

2024-01-06

我想将一个子元素(子元素)放入app-header-layout。子元素包含一个paper-dialog modal。当我打开模式时,我希望看到对话框出现在front的背景。相反,会出现对话框behind背景。

如何让模式对话框出现在背景前面?或者这可能是一个新发现的错误app-drawer-layout or app-header-layout元素?

这是笨蛋 http://plnkr.co/edit/ZjPHGqkt8vvDbFdF4CNn?p=preview. ... http://plnkr.co/edit/ZjPHGqkt8vvDbFdF4CNn?p=preview http://plnkr.co/edit/ZjPHGqkt8vvDbFdF4CNn?p=preview

index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="import" href="x-app.html">
  </head>
  <body>
    <x-app></x-app>
  </body>
</html>
x-app.html
<link href="content-el.html" rel="import">

<base href="https://polygit.org/components/">

<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">

<link href="app-layout/app-drawer/app-drawer.html" rel="import">
<link href="app-layout/app-drawer-layout/app-drawer-layout.html" rel="import">
<link href="app-layout/app-header-layout/app-header-layout.html" rel="import">
<link href="app-layout/app-header/app-header.html" rel="import">
<link href="app-layout/app-toolbar/app-toolbar.html" rel="import">

<link href="iron-icon/iron-icon.html" rel="import">
<link href="iron-icons/iron-icons.html" rel="import">
<link href="paper-icon-button/paper-icon-button.html" rel="import">

<dom-module id="x-app">

<template>

  <style></style>

  <app-drawer-layout>
    <app-drawer>
      drawer-content
    </app-drawer>
    <app-header-layout>
      <app-header>
        <app-toolbar>
          <paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
          <div main-title>MyNewApp</div>
        </app-toolbar>
      </app-header>

      <content-el></content-el>

    </app-header-layout>
  </app-drawer-layout>

</template>

<script>
  (function(){
    Polymer({
      is: 'x-app',
      properties: {},
    });
  })();
</script>

</dom-module>
content-el.html
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">

<link href="paper-dialog/paper-dialog.html" rel="import">

<dom-module id="content-el">

  <template>
    <button on-tap="show">Click to show dialog</button>
    <paper-dialog id="dialog" modal>
      <h2>Header</h2>
      <div>Dialog body</div>
    </paper-dialog>
  </template>

  <script>
    (function(){
      Polymer({
        is: 'content-el',
        properties: {},
        show: function() {
          this.$.dialog.open();
        },
      });
    })();
  </script>

</dom-module>

这是已知的(参见this https://github.com/PolymerElements/paper-dialog/issues/109 and this https://github.com/PolymerElements/app-layout/issues/295github问题)但不幸的是没有很好的记录限制铁覆盖行为 https://elements.polymer-project.org/elements/iron-overlay-behavior,即由paper-dialog:

您必须确保没有元素具有更高的堆栈上下文 z-index 比其父堆叠上下文高。你应该把这个 尽可能将元素作为子元素。

一种解决方法是移动paper-dialog之外的content-el以及之外的app-header-layout(或者进入index.html或者作为你的根的直接子代my-app元素)。您可以触发一个事件(即open-dialog并在根元素中处理它)。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Polymer 1.x:纸张对话框模式出现在应用程序标题布局后面 的相关文章

随机推荐

  • Crashlytics 不适用于 Xcode 10 beta

    我使用 Firestore 和 Google 提供的一些子服务 Crashlytics 就是其中之一 我最近开始使用 Xcode 10 beta 并且开始收到此错误 Users
  • Python 剥离方法

    今天在 python 终端中 我尝试了 a serviceCheck postmaster a strip serviceCheck 但不是得到 postmaster 我有 postmast 什么可能导致这种情况 我怎样才能得到 postm
  • 类型 Any 没有下标成员 json Swift 3

    我有这个代码 let subjectAbbreviation JSON data subject abbr as String Swift 3 抱怨 Any 类型没有下标成员 我该如何解开这个 我知道我可以使用 JSON as AnyObj
  • 如何关闭多个彼此独立的div。 javascript

    我构建了一排 4 个按钮来打开 4 个 div 一次打开一个 用户可以通过单击这些按钮在 4 个 div 之间切换 但是 用户必须能够再次关闭该 div 并且彼此独立 这意味着如果用户单击这些按钮之一 他必须能够仅使用一个 关闭按钮 再次关
  • 尝试同步调用 Async 方法。它永远等待 Task.Result [重复]

    这个问题在这里已经有答案了 因此 我正在编写一个应用程序 我想在其中公开一系列具有同步和异步等效方法的方法 为此 我认为最简单的方法是在 asnyc 方法中编写逻辑 并编写同步方法作为异步方法的包装器 同步等待它们传递结果 代码没有发挥作用
  • 无论如何可以使用成员函数作为默认参数吗?

    它尝试了类似的方法 但行不通 有没有办法获得类似的效果 class A public int foo void bar int b foo 是的 重载该函数并调用其中的成员函数 void bar bar foo
  • c++11 lambda 是否捕获它们不使用的变量?

    当我使用 表示我希望通过 lambda 中的值捕获所有局部变量 这会导致all正在复制的函数中的局部变量 或仅复制所有局部变量lambda 使用的 因此 例如 如果我有 vector
  • Range Key 组合键查询

    目前我有一个包含以下字段的集合 userId otherUserId date status 对于我的 Dynamo 集合 我使用 userId 作为hashKey并为rangeKey我想使用日期 otherUserId 通过这样做 我可以
  • Bootstrap selectpicker 在克隆的 div 中刷新后重复

    我有一个引导选择器 div div class hidden div div
  • tf.train.get_global_step() 在 TensorFlow 中做什么?

    函数有什么用tf train get global step 在 TensorFlow 中 在机器学习概念中它相当于什么 当训练过程因某种原因停止时 您可以使用它从上次中断的地方重新开始训练 当然 您随时可以在不知道情况的情况下重新开始训练
  • PHP - 检查两个数组是否相等

    我想检查两个数组是否相等 我的意思是 相同的大小 相同的索引 相同的值 我怎样才能做到这一点 Using 根据用户的建议 我希望打印以下内容enter如果数组中至少有一个元素不同 但事实上并非如此 if POST atlOriginal o
  • Delphi 通用 TInterfaceList 可能吗?

    在Delphi 2010中 我定义了一个通用的TInterfaceList 如下所示 type TInterfaceList
  • ActiveAdmin 如何添加没有模型的自定义控制器[重复]

    这个问题在这里已经有答案了 可能的重复 将页面添加到活动管理 https stackoverflow com questions 7639978 add page to active admin 我目前正在寻找一种解决方案 用于将没有模型的
  • Microsoft .NET 4.0 完整框架和客户端配置文件之间的差异

    Microsoft NET Framework 4 0 完整安装程序 32 位和 64 位 为 48 1 MB 客户端配置文件安装程序为 41 0 MB 提取的安装文件分别为 237 MB 和 194 MB 安装后分别为 537 MB 和
  • D3.js - 是否可以在力导向图和节点链接树之间制作动画?

    我正在使用D3 js库并查看力导向图演示 http mbostock github com d3 ex force html http mbostock github com d3 ex force html 我也在查看节点链接树 http
  • 如何在 sitecore 中确定给定项目是否为起始项目?

    在配置文件中 我们为元素中的每个网站设置启动项 例如 startItem Home 我们还可以在代码中选择启动项 但我想问的是如何确定任何选定的项目是否是起始项目 至少我们可以选择开始项目并与给定项目进行比较 但我认为这不是优雅的代码 我们
  • SendMessage消息号的解释?

    我已经成功地使用 Windows SendMessage 方法来帮助我在文本编辑器中执行各种操作 但每次我只是复制和粘贴其他人建议的代码 而且我并不真正知道它的含义 总是有一个神秘的消息号作为参数 我如何知道这些代码的含义 以便我能够真正理
  • 需要电子邮件地址域 jQuery 验证 [重复]

    这个问题在这里已经有答案了 我正在使用以下代码 与jQuery 验证插件 http jqueryvalidation org 验证电子邮件地址 schedule tour form validate rules Email required
  • MongoDb 近/geonear 可变距离查询

    我想执行一个查询 其中距离是集合中的动态字段 集合中的条目示例 name myName location lat 10 lng 20 maximumDistance 10 name myName2 location lat 20 lng 2
  • Polymer 1.x:纸张对话框模式出现在应用程序标题布局后面

    我想将一个子元素 子元素 放入app header layout 子元素包含一个paper dialog modal 当我打开模式时 我希望看到对话框出现在front的背景 相反 会出现对话框behind背景 如何让模式对话框出现在背景前面