剑道窗口定位

Question

我正在使用bootstrap模板和Kendo Window ，到目前为止，模态剑道窗口的定位并不太难。 但是现在当我对某个区域使用不同的布局时，我发现自己在这件事上遇到了问题。

以下代码有望创建一个居中（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())

..并通过以下方式显示：

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

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

        wnd.open();

窗口未显示在 x 轴的中间。

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

Answer 1

窗口居中需要使用center()方法。 由于 Window 内容是通过 Ajax 加载的，因此您需要在其refresh事件中将小部件居中。

var wnd = $("#ownerVoucherCreateWindow").data("kendoWindow");
wnd.one("refresh", function(e) {
    e.sender.center();
});
wnd.refresh({
    url: '@Url.Action("Voucher_Create", "OwnerVoucher")'
});
wnd.open();

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

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

Answer 2

好吧，我想我很幸运，尽管像描述的那样指定了一个显式的顶部偏移量，但我的所有剑道窗口碰巧都居中显示。 我假设，当仅设置 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);