如何在Kendo窗口内部关闭窗口？

Question

如何在Kendo窗口内部关闭窗口？

7

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

- Saikat

2个回答

2

以下JavaScript代码定义了一个按钮，用于打开一个模态kendoWindow。一旦单击，您可以在窗口的主体内按下一个按钮来关闭它。

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>

- OnaBai

非常感谢你的答复，OnaBari。但这并不是我问题的实际解决方案。模态框的内容来自另一个域。关闭按钮将位于内容内部。现在如何通过点击按钮关闭此模态窗口呢？如果在同一域中，就没有问题。但父页面和模态窗口位于不同的域中。 - Saikat

你是如何加载内容的，也许是使用iframe吗？ - OnaBai

根据KendoUI文档（请参见此处），KendoUI将引入一个iframe来显示页面。如果您的情况是这样的（我认为是这样的），则从另一个网页内部访问容器数据将有严重限制（这些问题取决于浏览器-同源策略-）。 - OnaBai

1

检查KendoUI是否使用iframe来显示窗口内容。如果是这样，您应该能够使用建议的解决方案将myWindow声明为文档的全局变量（即在$(document).ready(function () {...})之外），并将定义留在内部不变。 - OnaBai

假设我有一个名为www.abc.com的网站，其中有一个按钮，点击该按钮会打开一个Kendo窗口。现在，Kendo窗口的内容包含另一个网站，比如www.xyz.com。那么，我们能否通过在www.xyz.com网站上存在的按钮来关闭Kendo窗口呢？请帮忙，我们的项目在这里卡住了。 - Saikat

显示剩余2条评论

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- OnaBai · Accepted Answer

在阅读您对我之前回答的评论后，我认为您的问题有误导性。您谈到了“模态”，“另一个域”和“关闭”按钮，但从您的评论中似乎没有任何相关内容。我从您的评论中得出结论，您想在KendoUI窗口中放置一个按钮（实际上是关闭按钮，但也可能是其他按钮），并且还希望显示一个页面（恰巧）位于不同的域中。如果这是您实际想要的，并预见到与跨域和安全相关的问题，我建议您实际上应该使用content.template，并定义一个模板，其中包括您的按钮和引用页面www.xyz.com的iframe。

类似于这样...

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();
});

通过为 close button 定义以下样式，您甚至可以使按钮在页面的其余部分上 float。

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