Why does my kendo window open by itself?

Question

I am creating a window pop up using Kendo, however, this window should only be shown when the user has clicked the button. The code that is shown to you makes the window automatically open when the web page is requested. i have done some research but found nothing, Any ideas?

More info: This is going to be used for a form and going to have a signature pad inside so when the pad (window) has been signed the cell in the table (The click here to sign) shall be replaced with the signature.

.cshtml,

<style>
    #example {
        min-height: 500px;
    }

    #undo {
        text-align: center;
        position: absolute;
        white-space: nowrap;
        padding: 1em;
        cursor: pointer;
    }

    .armchair {
        float: left;
        margin: 30px 30px 120px 30px;
        text-align: center;
    }

        .armchair img {
            display: block;
            margin-bottom: 10px;
        }

    .k-window-content a {
        color: #BBB;
    }

    .k-window-content p {
        margin-bottom: 1em;
    }

    @@media screen and (max-width: 1023px) {
        div.k-window {
            display: none !important;
        }
    }
</style>


<table>

    <tr>
        <td>
            <div id="example">
                <div id="window">
                    <H1>This is the window</H1>
                </div>
                <span id="undo" style="display:none" class="k-button hide-on-narrow">Click here to sign</span>
                <div class="responsive-message"></div>
            </div>
        </td>
    </tr>



</table>

<link rel="stylesheet" href="styles/kendo.common.min.css" />
<link rel="stylesheet" href="styles/kendo.default.min.css" />
<link rel="stylesheet" href="styles/kendo.default.mobile.min.css" />

<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>

<script>
    $(document).ready(function () {
        var myWindow = $("#window"),
            undo = $("#undo");

        undo.click(function () {
            myWindow.data("kendoWindow").open();
            undo.fadeOut();
        });

        function onClose() {
            undo.fadeIn();
        }

        myWindow.kendoWindow({
            width: "600px",
            title: "About Alvar Aalto",
            visible: false,
            actions: [
                "Pin",
                "Minimize",
                "Maximize",
                "Close"
            ],
            close: onClose
        }).data("kendoWindow").center().open();
    });
</script>

I now have this button:

Click here to open the window.

and this function:

$("#open").click(function (e) {
            myWindow.data("kendoWindow").open(); 

        });

However it does not open the window?

Answer 1

The window is opening right away because you are explicitly telling it to open right away:

myWindow.kendoWindow({
    ....
}).data("kendoWindow").center().open();

• myWindow.kendoWindow({ == turn myWindow into a Kendo Window

• .data("kendoWindow") == get a reference to that Kendo Window

• .center().open() == center it on screen(still hidden) and OPEN it.

Remove the .center().open() from your intitialization code and have it only on the button click.

https://dojo.telerik.com/@Stephen/uXeJe