KendoUI系列：Window

<link href="@Url.Content("~/Content/kendo/2014.1.318/kendo.common.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/kendo/2014.1.318/kendo.default.min.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/kendo/2014.1.318/jquery.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/kendo/2014.1.318/kendo.web.min.js")" type="text/javascript"></script>

<div id="Login" style="display: none;">
<table>
<tr>
<td>UserName:</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" /></td>
</tr>
</table>
</div>

<script type="text/javascript">
$(function () {
$("#Login").kendoWindow({
title: "Title",
width: 500,
height: 300,
actions: [
"Pin",
"Minimize",
"Maximize",
"Close"
],
modal: true
}); $("#Login").data("kendoWindow").title("User Login").center().open();
});
</script>

<script type="text/javascript">
$(function () {
$("#window").kendoWindow({
title: "Title",
width: 500,
height: 300,
actions: [
"Custom",
"Minimize",
"Maximize",
"Close"
],
modal: true
}); $("#window").data("kendoWindow").center().wrapper.find(".k-i-custom").click(function (e) {
alert("Customizing Action");
e.preventDefault();
});
});
</script>

<div id="window" style="display: none;"></div>

<script type="text/javascript">
$(function () {
$("#window").kendoWindow({
title: "Title",
width: 500,
height: 300,
content: "/Window/AjaxContent.html",
modal: true
}); $("#window").data("kendoWindow").center().open();
});
</script>

<script type="text/javascript">
$(function () {
var onClose = function () {
alert("Close");
}
var onOpen = function () {
alert("Open");
}
var onRefresh = function () {
alert("Refresh");
}
$("#window").kendoWindow({
title: "Title",
width: 500,
height: 300,
actions:["Refresh","Close"],
content: "/Window/AjaxContent",
open: onOpen,
close: onClose,
refresh:onRefresh,
modal: true
}); $("#window").data("kendoWindow").center().open();
});
</script>