JSFiddle - React, Tailwind, and code Playground

Kendo Message Box

by Alex Yu

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css">
<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.silver.min.css">
<div id="message"></div>

JavaScript

var Util = {

    /* Generic kendo message box for displaying UI messages. Supply parameters with div element id, box title, and box text
     * If no box title supplied, it will assume the message is an Error and label the box as such
     *
     * Example call: Util.showMessage("myDivsName", "My Message Box Title", "Pikachu, USE THUNDERBOLT!");
     */

    showMessage: function (divtitle, boxtitle, text) {
        if (!divtitle || !text) {
            console.log("Window must be given a html element and valid text.");
            return;
        }
        var mWindow = $("#"+divtitle);
        if (!mWindow.data("kendoWindow")) {
            mWindow.kendoWindow({
                actions: ["Close"],
                animation: {
                    open: {
                        effects: "fade:in",
                        duration: 500
                    },
                    close: {
                        effects: "fade:out",
                        duration: 500
                    }
                },
                draggable: false,
                modal: true,
                resizable: false,
                title: boxtitle ? boxtitle : "Error",
                width: 400,
                visible: true
            }).data("kendoWindow").content("<p>" + text + "</p>").center().open();
        }
        else {
            mWindow.data("kendoWindow").title(boxtitle ? boxtitle : "Error").content("<p>" + text + "</p>").open();
        }
    }
};

Util.showMessage("message","Pikachu", "...used Thunderbolt!");