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轴的中间。

是否存在任何约束以使kendo窗口成为中心。

Answer 1

好吧我想我很幸运，我所有的剑道窗口都恰好显示在中心，虽然如上所述指定了一个明显的偏移量。我假设，当仅设置x轴位置时，窗口将自动居中于y轴。因为看起来并非如此。我真的不知道为什么过去这样做了。无论如何，我想出了一种方法来取决于浏览器的中心窗口＆＃39;视口和窗口宽度：

以防任何人关心...

 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 = $（＆＃34;＃id＆＃34;）。data（＆＃34; kendoWindow＆＃34;）;

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



    displayWindowCenteredOnYAxis(wnd);

Answer 2

窗口居中需要使用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();

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

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

Kendo Window定位

2 个答案: