Question

如何删除kendo窗口的z-index？我不希望窗口是模态的，所以我确实喜欢这个 .Modal（false）。 但没有用，窗口正在渲染z-index为10003 像弹出窗口一样。我的目的是在同一页面上渲染9个窗口，每行在表格中放置3个窗口。由于z-index，布局分散了注意力。如果我能够删除z-index，我就能成功。

@(Html.Kendo().Window()
.Name("window")
.Title("About Alvar Aalto")

.Modal（假）

.Content(@<text>
    <div class="armchair">
        <img src="@Url.Content("~/content/web/window/armchair-402.png")"
                alt="Artek Alvar Aalto - Armchair 402" />
        Artek Alvar Aalto - Armchair 402
    </div>

    <p>
        Alvar Aalto is one of the greatest names in modern architecture and design.
        Glassblowers at the iittala factory still meticulously handcraft the legendary
        vases that are variations on one theme, fluid organic shapes that let the end user
        ecide the use. Interpretations of the shape in new colors and materials add to the
        growing Alvar Aalto Collection that remains true to his original design.
    </p>       
</text>)
.Draggable()
.Resizable()
.Width(600)
.Actions(actions => actions.Pin().Minimize().Maximize().Close())

)

Answer 1

我不相信可以使用可用的配置选项完成此操作。您可以尝试使用.Visible(false)，然后手动调整每个窗口的z-index以使其可见，但我想这会很脆弱。

所以我建议扩展窗口小部件来创建你自己的窗口类型，它不会以这种方式操纵z-index;这会将您的代码封装在自己的类中。有关扩展kendoWindow（以及一个简单示例）的更多信息，请参阅我的回答here。据我所知，负责z-index行为的主要方法是window.toFront()，所以你可能不得不重写它。

Answer 2

由于您计划在3 x 3网格中渲染窗口，我猜您不想移动或调整它们的大小，而您在KendoUI窗口中需要的只是样式，对吗？如果是这样，你应该看看面板样式（参见KendoUI demo here），你可以在这里设置你的代码作为KendoUI窗口，但是，当然，你既不能移动，也不能隐藏或调整大小。

您只需使用以下HTML：

<div class="k-block"><div class="k-header">Header</div>Block with header</div>

Answer 3

z-index设置在＆＃34; style＆＃34;属性动态的div。

使用css你需要的是一个重要规则，它将覆盖在元素上定义的样式。

  #mycontainer .k-window{
        z-index: 3 !important;
  }

kendo UI窗口z-index

.Modal（假）

3 个答案: