How to close a Kendo window from within the window content?

Question

I have an application. In a button clicked I tried to open a Kendo modal window. It's opening. My application is in one domain and the content of the Kendo window is from another domain. Now I want to close the modal window with a button which is inside the Kendo window. Here the issue begins. I cannot close the modal window. I searched using Google it but did not find any solution — do you know one?

Answer 1

After reading your comments to my previous answer I think that you question is misleading. You talk about modal, another domain and close button but seems from your comments that nothing of that is actually relevant. I conclude from your comments that you want to place a button (actually a close button but might be any other) in a KendoUI window and in addition you want to display a page (that incidentally) is in a different domain. If this is what you actually want -and foreseeing problem related to cross-domain and security- I would recommend that you should actually use content.template and define a template including your button and an iframe referencing the page www.xyz.com.

Something like this...

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

You might even make the button float on top of the rest of the page by defining the following style for close button.

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