Kendo UI Window Problem

Example of multiple modal windows not behaving well together.

by aidankirrane

HTML

<script src="http://cdn.kendostatic.com/2012.1.515/styles/kendo.common.min.css "></script>
<script src="http://cdn.kendostatic.com/2012.1.515/styles/kendo.blueopal.min.css "></script>
<script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.blueopal.min.css">
<div id='window1'>
    This is the 1st Window.  It should be modal, but since I dynamically created a second window, the overlay got hidden, even though I have not opened the 2nd window yet.
    <br/>
<span id="button2" class="k-button">Open 2nd Window</span>
</div>

<div id='window2'>
    This is the 2nd Window.
</div>

<span id="button1" class="k-button">Open 1st Window</span>

CSS

body 
        {
            font-family: Verdana, Arial, Helvetica, sans-serif;
            font-size: 10px;
            margin: 0px;
            padding: 0px;            
        }

JavaScript

$(document).ready(function() {

    window1 = $('#window1');
    window1.hide();
    window2 = $('#window2');
    window2.hide();

    $('#button1').click(function() {
        if (!window1.data("kendoWindow")) {
            window1.kendoWindow({
                width: "300px",
                visible: false,
                modal: true
            });
        }
        window1.show();
        window1.data("kendoWindow").open();

        if (!window2.data("kendoWindow")) {
            window2.kendoWindow({
                width: "300px",
                visible: false,
                modal: true
            });

            $('#button2').click(function() {
                window2.show();
                window2.data("kendoWindow").open();
            });
        }
    });

});