kendo-ui - 如何从窗口内容中关闭剑道窗口？

Question

我有一个应用程序。在单击一个按钮时，我尝试打开一个剑道模式窗口。它正在打开。我的应用程序位于一个域中，而 Kendo 窗口的内容来自另一个域。现在我想用剑道窗口内的按钮关闭模式窗口。问题从这里开始。我无法关闭模式窗口。我用谷歌搜索了它，但没有找到任何解决方案——你知道吗？

Answer 1

在阅读了您对我之前回答的评论后，我认为您的问题具有误导性。您谈论另一个域modal，但从您的评论中似乎没有任何实际相关。我从您的评论中得出结论，您想在 KendoUI 中放置一个（实际上是一个，但可能是其他任何一个），此外您还想显示一个页面（顺便说一句）位于不同的域中。如果这是您真正想要的 - 并且预见到与跨域和安全相关的问题 - 我建议您实际使用并定义一个模板，包括您的和引用页面。close buttonbuttonclose buttonwindowcontent.templatebuttoniframewww.xyz.com

像这样的东西...

var myWindow2 = $("#id2").kendoWindow({
    modal    : true,
    draggable: false,
    content  : {
        template: '<a href="javascript:void(0);" id="close2" class="k-button">Close</a>' +
                '<iframe src="http://www.xyz.com" frameborder="0" class="k-content-frame"></iframe>'
    },
    visible  : false,
    width    : 400,
    height   : 200,
    resizable: false,
    iframe   : true
}).data("kendoWindow");

$("#open2").on("click", function () {
    myWindow2.center();
    myWindow2.open();
});

$("#close2").on("click", function () {
    myWindow2.close();
});

您甚至可以float通过为close button.

#close2 {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10000;
}

Answer 2

以下 JavaScript 代码定义了button用于打开modal kendoWindow. 单击后，您可以button在主体内部按 a 以根据window需要将其关闭。

JavaScript 代码：

var myWindow = $("#id1").kendoWindow({
    title  : "hi",
    visible: false,
    modal  : true
}).data("kendoWindow");

$("#open").on("click", function () {
    console.log("opening");
    myWindow.center();
    myWindow.open();
});
$("#close").on("click", function () {
    console.log("closing");
    myWindow.close();
})

和HTML：

<a href="#" id="open" class="k-button">Open</a>

<div id="id1">
    <p>this is the content of my window</p>
    <a href="#" id="close" class="k-button">Close</a>
</div>