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>
<div id="confirmBox"></div>

JavaScript

var Util = {

    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();
        }
    },
    
    showConfirm: function (divtitle, boxtitle, text, yestext, notext) {
        var d = $.Deferred();
        Util._confirm(divtitle, boxtitle, text, yestext, notext);
        $(".scBtn").click(function(e){ 
            if(e.target.id==="showConfirmOK"){
                d.resolve();
            }else { d.reject();}
            $("#"+divtitle).data("kendoWindow").close();            
        });
        return d;
    },
    
    _confirm: function (divtitle, boxtitle, text, yestext, notext) {
        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: {
          ...