jube-fork/Jube.App/wwwroot/kendo/examples/window/index.html

<!DOCTYPE html>
<html>
<head>
    <title>Overview</title>
    <meta charset="utf-8">
    <link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.mobile.min.css" rel="stylesheet">
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/jszip.min.js"></script>
    <script src="../../js/kendo.all.min.js"></script>
    <script src="../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>
    
        <a class="offline-button" href="../index.html">Back</a>
    
    <div id="example">
    <div class="configurator">
        <div class="header">Configurator</div>
        <div class="box-col">
            <h4>Animation Settings</h4>
            <ul class="options">
                <li>
                    <input id="default" name="animation" type="radio" checked="checked" /> <label for="default">default/zoom animation</label>
                </li>
                <li>
                    <input id="toggle" name="animation" type="radio" /> <label for="toggle">toggle animation</label>
                </li>
                <li>
                    <input id="expand" name="animation" type="radio" checked="checked" /> <label for="expand">expand animation</label>
                </li>
                <li>
                    <input id="opacity" type="checkbox" checked="checked" /> <label for="opacity">animate opacity</label>
                </li>
            </ul>
        </div>
        <div class="box-col">
            <h4>Window Settings</h4>
            <ul class="options">
                <li>
                    <input id="draggable" type="checkbox" checked="checked" /> <label for="draggable">draggable</label>
                </li>
                <li>
                    <input id="resizable" type="checkbox" checked="checked" /> <label for="resizable">resizable</label>
                </li>
            </ul>
        </div>
    </div>

    <div id="window">
        <div style="text-align: center;">
            <img src="../content/web/window/egg-chair.png" alt="ARNE JACOBSEN EGG CHAIR" />
            <p>ARNE JACOBSEN EGG CHAIR<br /> Image by: <a href="https://www.conranshop.co.uk/" title="https://www.conranshop.co.uk/">https://www.conranshop.co.uk/</a></p>
        </div>
    </div>

    <span id="undo" style="display:none" class="k-button hidden-on-narrow">Click here to open the window.</span>

    <div class="responsive-message"></div>

    <script>
        function onClose() {
            $("#undo").fadeIn();
        }

        $(document).ready(function () {
            var original = $("#window").clone(true);

            $(".box-col input").change(function () {
                var clone = original.clone(true);

                $("#undo").hide();
                $("#window").data("kendoWindow").destroy();

                setTimeout(function () {
                    $("#example").append(clone);
                    initWindow();
                }, 200);
            });

            var getEffects = function () {
                return (($("#expand")[0].checked ? "expand:vertical " : "") +
                    ($("#opacity")[0].checked ? "fadeIn" : "")) || false;
            };

            function initWindow() {
                var isDraggable = $("#draggable")[0].checked;
                var isResizable = $("#resizable")[0].checked;

                var windowOptions = {
                    actions: ["Custom", "Minimize", "Maximize", "Close"],
                    draggable: isDraggable,
                    resizable: isResizable,
                    width: "500px",
                    title: "EGG CHAIR",
                    visible: false,
                    close: onClose
                };

                if (!$("#default")[0].checked)
                    windowOptions.animation = { open: { effects: getEffects() }, close: { effects: getEffects(), reverse: true } };

                $("#window").kendoWindow(windowOptions);

                $("#undo")
                    .bind("click", function () {
                        $("#window").data("kendoWindow").open();
                        $("#undo").fadeOut(300);
                    });

                $("#window").data("kendoWindow").open();
            }

            initWindow();

            $("#window").data("kendoWindow").wrapper
                .find(".k-i-custom").parent().click(function (e) {
                    alert("Custom action button clicked");
                    e.preventDefault();
                });
        });
    </script>

    <style>

        #example {
            min-height: 400px;
        }

        #undo {
            text-align: center;
            position: absolute;
            white-space: nowrap;
            padding: 1em;
            cursor: pointer;
        }
        .k-window{
            z-index:100000;
        }
        media screen and (max-width: 1023px) {
            div.k-window {
                display: none !important;
            }
        }
    </style>

</div>


    
</body>
</html>