JSFiddle - React, Tailwind, and code Playground
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>
<button class="k-button" id="removeButton">Remove item</button>
<div id="remove-window" class="window">
Are you sure?
<div class="window-buttons">
<button class="k-button">Ok</button> <button class="k-button">Cancel</button>
</div>
</div>
CSS
body {
font: 12px/1.5 Tahoma,sans-serif;
}
.window {
display: none;
}
.window-buttons {
padding-top: .5em;
margin-top: 1em;
}
JavaScript
$(document).ready(function() {
$("#removeButton").click(function(e) {
e.preventDefault();
var windowElement = $("#remove-window"),
window = windowElement.data("kendoWindow");
// if the kendo window is not initialized...
if (!window) {
// ...initialize it
windowElement.css("display", "block").kendoWindow({
resizable: false,
modal: true,
width: "250px",
animate:false,
title: "Please confirm"
});
window = windowElement.data("kendoWindow");
}
window.center().open();
});
});