JSFiddle - React, Tailwind, and code Playground
by Ignacio Fuentes
HTML
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.223/styles/kendo.common-bootstrap.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.1.223/styles/kendo.bootstrap.min.css">
<script src="https://kendo.cdn.telerik.com/2017.1.223/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js"></script>
<div id="grid"></div>
CSS
#window {
min-height: 280px;
}
.fieldlist {
margin: 0 0 -2em;
padding: 0;
}
.fieldlist li {
list-style: none;
padding-bottom: 2em;
}
.fieldlist label {
display: block;
padding-bottom: 1em;
font-weight: bold;
text-transform: uppercase;
font-size: 12px;
color: #444;
}
JavaScript
$(document).ready(function() {
var myWindow = $("#window"),
undo = $("#undo"),
loginButton = $("#login-button");
loginButton.click(function() {
var name = $("#name").val();
var password = $("#password").val();
var data = {
name: name,
password: password
};
$.post("/echo/json/", {
json: JSON.stringify(data)
},
function(data, status) {
console.log(data);
alert("Successful log in!");
myWindow.data("kendoWindow").close();
});
})
undo.click(function() {
myWindow.data("kendoWindow").open();
undo.fadeOut();
});
function onClose() {
undo.fadeIn();
}
myWindow.kendoWindow({
width: "380px",
title: "Login",
visible: false,
actions: [
"Pin",
"Minimize",
"Maximize",
"Close"
],
close: onClose
}).data("kendoWindow").center();
});