kendo-ui - 在非模态窗口中使用模态的问题

Question

我正在尝试在另一个窗口中使用模式窗口作为确认/消息弹出窗口，但有些问题我不确定我是否无法解决。

这是我的情况的一个jsfiddle： 小提琴

我要解决的问题是：

1. 在使用模式窗口的同时也使用 appendTo 似乎有背景问题，我看到它在那里，直到你点击其他地方，然后它消失了。

2. 如果我可以在我的窗口而不是窗口中居中模式，那就太好了

3. 即使在模态上禁用了拖动，如果您抓住模态标题栏，它也会移动外部窗口。

4. 如果我单击“X”关闭内部模式，它会关闭我的外部窗口。

任何人都可以就这些问题提出解决方案吗？

$('<div id="confirmModal"><div id="confirmWindow">Is This Correct?<p><input type="button" id="btnYes" value="Yes" /><input type="button" id="btnNo" value="No" /></p></div></div>').prependTo('#Window');
$('#confirmWindow').kendoWindow({
  modal: true,
  resizable:false,
  draggable:false,
  appendTo: '#Window',
  close: function() {
    setTimeout(function(){
      $('#confirmWindow').kendoWindow('destroy');
    }, 200);
  }
});

$('#confirmWindow').find('#btnNo').click(function () {
    $('#confirmWindow').kendoWindow('close');
});
$('#confirmWindow').find('#btnYes').click(function () {
    $('#confirmWindow').kendoWindow('close');
});

编辑

我已经编辑了小提琴，因为第一个是我要发布的旧版本。

Answer 1

从appendTo 文档：

Window 将附加到的元素。请注意，这并不限制在给定元素内拖动窗口。

因此，Kendo 窗口是浮动的，它们不受您将其附加到的元素的限制。prepend这意味着对 HTML 元素的确认窗口然后对同一个元素的确认窗口没有意义append。

Answer 2

检查来自 Telerik 工程师的响应 http://www.kendoui.c​​om/forums/kendo-ui-web/window/kendowindow-appendto- boundaries.aspx

<script type="text/javascript">
    $(document).ready(function () {
        $("#windowName").data("kendoWindow").dragging._draggable.bind("drag", function (e) {

        var wnd = $("#window").data("kendoWindow");
        var position = wnd.wrapper.position();

        var minT = 0;
        var minL = 0;
        //Get the Window width and height and
        //place them in position of the hard-coded width and height
        var maxT = 600 - wnd.wrapper.height();
        var maxL = 900 - wnd.wrapper.width();

        if (position.left < minL) {
            coordinates = { left: minL };
            $(wnd.wrapper).css(coordinates);
        }

        if (position.top < minT) {
            coordinates = { top: minT };
            $(wnd.wrapper).css(coordinates);
        }

        if (position.left > maxL) {
            coordinates = { left: maxL };
            $(wnd.wrapper).css(coordinates);
        }

        if (position.top > maxT) {
            coordinates = { top: maxT };
            $(wnd.wrapper).css(coordinates);
        }
    })
})
</script>