Question

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

Answer 1

在阅读您对我之前回答的评论后，我认为您的问题具有误导性。您谈论的是modal，另一个域和close button，但您的评论中似乎没有任何与此相关的内容。我从您的评论中得出结论，您希望在KendoUI button中放置close（实际上是button window，但可能是其他任何内容），此外您还要显示页面（顺便提一下）位于不同的域中。如果这是您真正想要的 - 并预见到与跨域和安全相关的问题 - 我建议您实际使用content.template并定义包含button和iframe的模板引用页面www.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正文内的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>

如何从窗口内容中关闭Kendo窗口？

2 个答案: