在 Kendo Window UI 控件中需要帮助

Question

我正在开发一个顾问门户，这是我们公司项目的一部分，我的老板建议我对某些链接上的弹出窗口使用 kendow 窗口弹出控件。

我已经通过使用剑道应用程序控制来完成它，但是引起了一个小问题，这让我的外观和感觉有点糟糕。

我们在一个页面上有链接，我们的应用程序应该在单击任何链接时显示使用弹出窗口，但是当我实际运行该页面时，首先出现一个弹出式剑道窗口，然后当我最小化或关闭它时链接根据我们的意愿开始工作。

我确定在 document.ready(function(){}); 上显示弹出窗口的 jquery 代码存在一些问题；但是当点击链接时它应该可以工作。

我在这里发布我的代码，请帮助我使其更加精致和美观

var window = $("#window"),
                        undo = $("#undo")
                                .bind("click", function () {
                                    window.data("kendoWindow").open();
                                    window.data("kendoWindow").center();
                                    undo.hide();
                                });




var onClose = function () {
    undo.show();
}

if (!window.data("kendoWindow")) {
    window.kendoWindow({
        width: "600px",
        height: "500px",
        draggable: false,
        actions: ["Minimize", "Maximize", "Close"],
        resizable: false,
        title: "Report Activity",
        content: "../../AlertCounselor.htm",
        close: onClose
    });
}

HTML：

<div id="window"></div>

            <label id="undo" style="display:none; width:200px;" class="k-group" ><a href="#">Alert Counselor</a></label>

---

Answer 1

如果您不希望在加载文档时显示窗口，则应在初始化时指定visible: false（查看文档here）。

假设您有以下链接：

<a href="#" id="open">Click here for opening the window and not before</a>

然后将窗口定义为：

var myWindow = window.kendoWindow({
    visible  : false,
    width    : "600px",
    height   : "500px",
    draggable: false,
    actions  : ["Minimize", "Maximize", "Close"],
    resizable: false,
    title    : "Report Activity",
    content  : "../../AlertCounselor.htm",
    close    : onClose
}).data("kendoWindow");

这应该让窗口关闭，等待其他东西打开它。

最后为链接定义一个click事件处理器：

$("#open").on("click", function() {
    myWindow.open();
});