JSFiddle - React, Tailwind, and code Playground

by ashitanojoe

HTML

<script src="//da7xgjtj801h2.cloudfront.net/2013.1.319/js/kendo.web.min.js"></script>
<link rel="stylesheet" href="//da7xgjtj801h2.cloudfront.net/2013.1.319/styles/kendo.common.min.css">
<link rel="stylesheet" href="//da7xgjtj801h2.cloudfront.net/2013.1.319/styles/kendo.default.min.css">
<div id="window">
    <form>
        <input type="text" />
    </form>
</div>

<div id="open">Open</div>
<div id="close">Close</div>

<div id="append"></div>

JavaScript

var w = $("#window").kendoWindow({
    visible: false,
    title: false,
    resizable: false,
    appendTo: "#append",
    activate: function () {
        this.element.find("input:text").focus();
    }
}).data("kendoWindow");

$("#window").find(":text").kendoAutoComplete();

$("#open").click(function() {
    w.open();
});

$("#close").click(function() {
    w.close();
});

$(document).on("click", function (e) {
    var $elm = $(e.target);
    if (!$elm.is("#open") && !$elm.is("#close") && $elm.closest(".k-window").length == 0) {
        w.close();
    }
});