Title-less dialog

kendoWindow without a title bar

by gyoshev

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">Are you sure?</p>

    <button class="delete-confirm k-button">Yes</button>
    <a href="#" class="delete-cancel">No</a>
</script>

CSS

body {
    font: 12px/1.5 Tahoma,sans-serif;
}

.k-window-titleless {
    padding-top: 0 !important;
}

.k-window-titleless .k-window-titlebar {
    display: none;
}

.k-window-titleless .k-window-content {
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

.delete-message {
    width: 12em;
}

.delete-cancel {
    color: #000;
}

JavaScript

var kendoWindow = $("<div />").kendoWindow({
        title: "Confirm",
        resizable: false,
        modal: true,
        visible: false
    });

kendoWindow.closest(".k-window").addClass("k-window-titleless");

kendoWindow.data("kendoWindow")
    .content($("#delete-confirmation").html())
    .center().open();

kendoWindow
    .find(".delete-confirm,.delete-cancel")
        .click(function() {
            if ($(this).hasClass("delete-confirm")) {
                alert("Deleting record...");
            }
            
            kendoWindow.data("kendoWindow").close();
        })
        .end()