Question

我试图在另一个窗口中使用模态窗口作为确认/消息弹出窗口，但是有一些问题我不确定我是否无法绕过。

以下是我的情况：Fiddle

我想解决的问题是：

使用模态窗口同时也使用appendTo似乎有后退问题，我看到它在那里，直到你点击其他地方，然后它消失。
如果我可以将模态放在窗口而不是窗口中，那将是很棒的
即使在模式上禁用拖动，如果您抓取模态标题栏，它也会移动外部窗口。
如果我点击“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 documentation：

将附加窗口的元素。 请注意，这不会限制给定元素中的窗口拖动。

因此，Kendo窗口是浮动的，它们不会被约束到您追加它的元素。这意味着prepend对HTML元素的确认窗口没有意义，然后append对同一个元素有意义。

Answer 2

检查来自telerik enginer的响应 http://www.kendoui.com/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>

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

2 个答案: