CODEWITHSUNDEEP
kendo-uiwindow
Saikat
Saikat

Reputation: 420

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

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?

Upvotes: 7

Views: 16491

Answers (2)

OnaBai
OnaBai

Reputation: 40887

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

Upvotes: 4

OnaBai
OnaBai

Reputation: 40887

The following JavaScript code defines a button for opening a modal kendoWindow. Once clicked you can press a button inside the body of the window for closing it as you want.

JavaScript code:

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

and the 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>

Upvotes: 2

Related Questions