Kendo ui 剑道窗口定位

我正在使用

bootstrap

模板和

剑道窗口

，到目前为止，模式剑道窗口的定位并不难。 但现在，当我对某个区域使用不同的布局时，我发现自己在这方面有问题

以下代码将创建居中（x轴）模式剑道窗口：

@(Html.Kendo().Window()
    .Name("Window1")
  .Visible(false)
      .Position(builder => builder.Top(100))
      .Draggable()
      .Content(@<div class="kendoWindowContent"><p>Please wait...</p><div class="k-loading-image"></div></div>)
    .Width(1000)
      .Title("Title1")
      .Actions(actions => actions.Close())
      .Modal(true)
      .Resizable())

窗口不是显示在X轴的中间。

---

剑道窗口居中是否有任何限制。

窗口居中需要使用该方法。由于窗口内容是通过Ajax加载的，因此需要将小部件置于事件中心

也可以在每个刷新事件中触发居中，而不是

---

另一个选项是设置显式和。在这种情况下，您可以随时将窗口居中，因为小部件尺寸在更改（加载）内容后不会改变。

好的，我想我很幸运，我的所有剑道窗口碰巧都居中显示，尽管指定了一个明确的顶部偏移，如前所述。 我假设，当只设置了x轴位置时，窗口将自动以y轴为中心。 看来情况并非如此。我真的不知道为什么这在过去一直有效。 无论如何，我找到了一种根据浏览器的视口和窗口宽度将窗口居中的方法：

以防万一有人在乎

 function displayWindowCenteredOnYAxis(kendoWindow) {

        var windowOptions = kendoWindow.options;

        var pos = kendoWindow.wrapper.position();

        var viewPortWidth = $(window).width();
        var wndWidth = windowOptions.width;

        pos.left = viewPortWidth / 2 - wndWidth/2;

        kendoWindow.wrapper.css({
            left: pos.left
        });

        kendoWindow.open();
 }

用法：

    var wnd = $("#id").data("kendoWindow");

    wnd.refresh({
        url: '@Url.Action("Action", "Controller")'
    });

    displayWindowCenteredOnYAxis(wnd);

---

谢谢你的意见！我不希望窗口显示在y轴的中心，而只显示在x轴上（我使用+200到顶部的偏移量（y=0），因此我不能使用center（）方法。另一件事是：带有显式设置尺寸和居中窗口的事件没有显示在正中心。您在这里有一个输入错误：wnd.one（“刷新”，函数（e）{e.sender.center（）；}）；

 function displayWindowCenteredOnYAxis(kendoWindow) {

        var windowOptions = kendoWindow.options;

        var pos = kendoWindow.wrapper.position();

        var viewPortWidth = $(window).width();
        var wndWidth = windowOptions.width;

        pos.left = viewPortWidth / 2 - wndWidth/2;

        kendoWindow.wrapper.css({
            left: pos.left
        });

        kendoWindow.open();
 }

    var wnd = $("#id").data("kendoWindow");

    wnd.refresh({
        url: '@Url.Action("Action", "Controller")'
    });

    displayWindowCenteredOnYAxis(wnd);