Kendo UI Confirmation Dialog

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2011.3.1129/js/kendo.all.min.js"></script>
<script id="delete-confirmation" type="text/x-kendo-template">
    <p class="delete-message">The Parent Group record already exists in Facets, would you like to continue and load the Group record?</p>
    <br/>
    <button class="delete-confirm k-button">Yes</button>
    <button class="delete-cancel k-button">No</button>
</script>

CSS

body {
    font: 12px Arial, sans-serif;
}

.delete-message {
    width: 300px;
}

.delete-cancel {
    color: #000;
}

JavaScript

$(function() { 
    var kendoWindow = $("<div />").kendoWindow({
            title: "Enrollment Confirmation",
            resizable: false,
            modal: true
        });
    
    kendoWindow.data("kendoWindow")
        .content($("#delete-confirmation").html())
        .center().open();
    
    kendoWindow.find(".delete-confirm,.delete-cancel")
        .click(function() {
            if ($(this).hasClass("delete-confirm")) {
               kendoWindow.data("kendoWindow").close();
            }
            
            kendoWindow.data("kendoWindow").close();
        })
        .end()
});