如何强制 Kendo UI 模式窗口在页面中居中？以及如何禁用所有操作？答案

【问题标题】：How to force a Kendo UI modal window to center in a page? and how to disable all the actions?如何强制 Kendo UI 模式窗口在页面中居中？以及如何禁用所有操作？
【发布时间】：2013-04-28 09:24:56
【问题描述】：

我试图在浏览器的中心显示一个 Kendo UI 模式窗口，但它一直显示在页面底部，我的意思是窗口的唯一可见部分是顶部栏，窗口的其余部分是看不见的，只有当您拖动它时才能正确查看它。我没有将样式应用于用于窗口的 div，所以我很困惑为什么它会这样显示。

我还想禁用窗口顶部栏上的所有操作按钮，尝试设置一个空的操作数组，但默认显示关闭按钮，有没有办法只显示窗口的标题在顶栏上？我希望窗口在单击其中的按钮时消失。

这就是我创建窗口的方式：

var accessWindow = $("#accessDiv").kendoWindow({
    actions: [],
    draggable: true,
    height: "300px",
    modal: true,
    resizable: false,
    title: "Access",
    width: "500px"
});

accessWindow.center();
accessWindow.open();

这是我的 div，只有一个标签、一个输入和一个按钮，目前没有应用 CSS：

<div id="accessDiv" style=" width: 100%; height: 100%; background-color: #fff;">
    <label>Enter access key</label>
    <input type="text" />
    <input type="button" title="Enter" value="Enter" />
</div>

【问题讨论】：

标签： jquery kendo-ui modal-dialog

【解决方案1】：

您是否尝试过将其隐藏，然后居中并打开它？

var accessWindow = $("#accessDiv").kendoWindow({
 actions: {}, /*from Vlad's answer*/
 draggable: true,
 height: "300px",
 modal: true,
 resizable: false,
 title: "Access",
 width: "500px",
 visible: false /*don't show it yet*/
}).data("kendoWindow").center().open();

来自：http://www.kendoui.com/forums/ui/window/kendowindow-center-doesn-t-work-when-inside-an-iframe.aspx

【讨论】：

你不是说.data('kendoWindow').center().open()吗？但是，是的，这解决了问题，如果我想稍微改变它的位置，我应该怎么做？
如果您知道 XY 位置，您可以使用 accessWindow.wrapper.css({ top: "100px", left: "50px" })。请记住，您可以通过accessWindow.wrapper.position() 获得该职位。示例here
如果我关闭它并再次打开它，有时仍然会觉得它很古怪。

【解决方案2】：

最后两行应该是：

accessWindow.data("kendoWindow").center();
accessWindow.data("kendoWindow").open();

【讨论】：

甚至accessWindow.data("kendoWindow").center().open();
我没有按这个顺序工作。弗拉德在上面的回答，他说打开窗户，然后居中，努力使我的窗户居中。
@vapcguy，你是怎么得到它来防止在窗口先打开然后居中滑动的？
其实很抱歉，我又看了一遍，毕竟我有accessWindow.data("kendoWindow").center().open();。
不确定顺序是否真的很重要，但 height 很重要，因此在从 Ajax 加载内容的场景中，您需要将其强制到某个高度，否则试图使没有高度的东西居中。

【解决方案3】：

1.您需要交换最后两行代码。首先你需要打开窗口，然后你可以居中。

2.要显示没有任何操作的窗口，您需要传递空对象：

actions: {}

【讨论】：

空对象显示没有动作，但窗口一直显示在底部，我想我需要在这方面指定更多，当我说底部时，我的意思是你只能看到顶栏，该窗口不会显示在浏览器上，只有在您将其拖动到周围才能查看它。
打开窗口，然后执行.center() 对我有用。非常感谢这条信息。 +1
@VladOmelyanchuuk，当我 open().center() 时，我可以看到我的对话框在屏幕上滑动以居中。我怎样才能防止这种情况发生？

【解决方案4】：

下面的一个对我有用。如果您不喜欢它作为模态，请将其设置为 false 或将其删除。

 var window = $("#addBlacklistWind");

   $("#btnAddBlacklist").bind("click", function () {
            window.data("kendoWindow").center().open();
        });

        window.kendoWindow({
            width: "800px",
            title: "Add New Blacklist",
            modal: true,
            visible: false,
            actions: [
                "Maximize",
                "Close"
            ]
        });

【讨论】：